比例适合图像的DIV中 - 图像不应该被裁剪

我读了一堆关于一个div内的图像固定的职位，但没有解决我的问题尚未：比例适合图像的DIV中 - 图像不应该被裁剪

我有一个响应网页设计，设置容器div的高度到浏览器窗口高度，然后将图像加载到flexslider中。大多数图像将比浏览器视口大。

我的问题是，我可以使照片适合宽度正确，但图像从未正确调整高度。请参阅http://stineheilmann.dk/portfolio/shoes/（图片3）

如何确保图片始终保持在包含div的同时保持纵横比？

来源

2012-11-23 Christoffer Hauthorn Boisen

'IMG {宽度：100％;身高：自动; }'应该可以工作 – Andy

好吧，至少在所有浏览器中都不是这样，因为这不能解决我的裁剪问题。 –

是否有浏览器限制？你在找什么类似this demo？

CSS

.frame{width:300px;height:300px;padding: 2px; border:1px solid #ccc;margin:5px;} 
.frame img{max-width:100%;max-height:100%;}

HTML会是这样的

<div class="frame"> 
    <img src="http://farm8.staticflickr.com/7251/8165766003_0e57a95b55.jpg"/> 
</div> 
<div class="frame"> 
    <img src="http://farm8.staticflickr.com/7251/8165766003_0e57a95b55.jpg"/> 
</div>

更新：我有不同的纵横比的三幅图像，即适合在div更新的演示没有得到偏斜或溢了出来的div。

来源

2012-11-23 11:11:03 ch4nd4n

我看不到您的更新。因此，为了这个工作，包含div需要有固定的宽度和高度？如果有必要，我只需使用jQuery编辑高度和宽度。 –

它适用于Chrome，但不是所有其他浏览器。我更新了网站上的代码。 –

仅此CSS添加到以下选择：

.flexslider .slides img { 
    height:100%; 
    .... 
}

来源

2012-11-23 11:11:40

对不起，但这在FF中不起作用，并且在某些条件下会扭曲图像的比例。 –

比例适合图像的DIV中 - 图像不应该被裁剪

回答

相关问题