使用CSS强制长宽比在Safari上不起作用 [英] Forcing aspect ratio with CSS doesn't work on Safari

问题描述

以下代码在Firefox和Chrome中运行良好，但在 Safari （在Mac和iPad上测试）中不可用： http://jsfiddle.net/eFd87/ 。

The following code works well in Firefox and Chrome, but doesn't in Safari (tested on Mac and iPad): http://jsfiddle.net/eFd87/.

<div id="wrapper">
    <div id="content">
        <img src="http://farm3.staticflickr.com/2783/4106818782_cc6610db2c.jpg">        
    </div>
</div>

#wrapper {
    position: relative;
    padding-bottom: 33.33%; /* Set ratio here */
    height: 0;
}
#content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: green;
    text-align: center;
}
#content img {
    max-height: 100%;
}​

目标是让一个封装器div保持固定的宽高比strong>在我的网络应用程序中它是一个轮播），并且其中的图像调整大小以适合div（和中心）。

The goal is to have a wrapper div keep a fixed aspect ratio (in my web application it is a carousel), and the image inside it resize to fit in the div (and center).

由于 height：0 （这将给img的高度为0）而不显示图像。使用 height：100％图像显示，但不适合div（溢出）。

On Safari the image doesn't display because of the height: 0 (which will give a height of 0 for the img). With height: 100% the image display but doesn't fit the div (it overflows).

看到这个问题的任何解决方案？我已经在这个小时...

Do you see any solution for this problem? I've been on this for hours...

推荐答案

宽度100％和高度自动为我在Safari上工作。最初，我使用100％的w和h，在FF上运行正常，但在Safari上失败。

Width 100% and Height auto worked for me on Safari. Initially, i was using 100% for both w and h which works fine on FF but failed on Safari.

.stretch {
  width: 100%;
  height: auto;
}

HTML：

<div>
    <img src="images/someimg.jpg" class="stretch" alt="" />
</div>

而且，我使用Bootstrap将其添加到所有元素。

And oh, I've used Bootstrap which adds this to all elements.

*, *:before, *:after {
  -moz-box-sizing: border-box;
}

这篇关于使用CSS强制长宽比在Safari上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！