相关疑难解决方法(0)

我有一个网站,它有一个固定的长宽比近似16:9景观,像一个视频.

我想让它居中并扩展以填充可用的宽度和可用的高度,但不要在任何一侧变大.

例如:

1. 高而薄的页面将使内容伸展整个宽度,同时保持比例高度.
2. 较短的宽页面将使内容延伸到整个高度,具有成比例的宽度.

我一直在研究两种方法:

1. 使用具有正确宽高比的图像来扩展容器div,但我无法让它在主要浏览器中以相同的方式运行.
2. 设置比例底部填充,但仅相对于宽度工作并忽略高度.它随着宽度不断变大,并显示垂直滚动条.

我知道你可以很容易地用JS做到这一点,但我想要一个纯CSS解决方案.

有任何想法吗？

我一直试图拼凑砌体和moo工具lazyload然而他们似乎都没有很好地在一起尽管它可能只是因为我在编码时有点无用!

砖石在这个页面上工作.

然而,当我尝试将它与lazyload放在一起时,它似乎完全陷入困境.有谁知道如何将两个插件一起实现？

我花了6天时间试图解决这个问题,这是我最后的希望哈!

谢谢

以下代码在 Firefox 和 Chrome 中运行良好，但不适用于Safari（在 Mac 和 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（这将使 img 的高度为 0）。带有height: 100%图像显示但不适合 …

在HTML窗口中,我正在设置自定义正文

<img src="file://[filename]">

显示图像

现在我想拉伸图像以适应可用窗口,但保留纵横比.

<img src="file://[filename]" width="100%" height="100">

延伸但也扭曲了图像.

是否有一些HTML技巧可以做到这一点？IE唯一的解决方案很好,因为这是在托管的浏览器控件中.