强制使用CSS长宽比在Safari上不工作(Forcing aspect ratio with CS

下面的代码工作以及在Firefox和Chrome，但不会在Safari（苹果和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保持一个固定的宽高比（ 在我的web应用程序是一个旋转木马 ），并在图像内调整其大小，以适应在div（和中心）。

在Safari图像不因的显示height: 0 （这将给予的0为IMG的高度）。 随着height: 100%的图像显示，但不适合在div（溢出）。

你看到了这个问题的任何解决方案？ 我一直在这几个小时...

Answer 1:

这不正是一个伟大的回答你的问题，但它是一个答案不过。

我很怀疑这是可能的，因为据我所知（我很高兴在此进行校正）做到这一点使用一个CSS唯一的办法是没有办法执行基于另一个CSS属性的计算。 所以width: height * 1.3; 例如是不可能的。 您不能使用任何％，因为这不是其自身父的百分比。

目前您正在寻找在涉及底部填充不可靠或者工作方式，它会在屏幕上工作，但是如果别人屏具有不同的纵横比或者他们有很多的工具栏改变浏览器窗口的纵横比，则纵横比将是错误的。 ％是除非你能保证你的大小不能真正使用父母的。

到目前为止，我可以告诉你唯一的选择上，这是JavaScript的。 最明显的，我的建议是jQuery的或一些其他的框架来计算和基于宽度明确设置高度。 不要忘了，虽然听的浏览器窗口大小调整。

Answer 2:

宽度100％和高度自动为我工作在Safari。 最初，我是用100％两个W和H这在FF工作正常，但未能在Safari。

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

HTML：

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

呵呵，我用引导其增加了这所有的元素。

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

文章来源: Forcing aspect ratio with CSS doesn't work on Safari