图像扩展超出父级div大小

Question

我有一个包含图像的div。 我希望图像随着div的大小调整大小，但我不希望图像高度超过480px。 我将下面的代码发布出来。 它可以正确地随着div调整大小，但没有遵守max-height限制。 如果我将mx高度移动到img css中，它就会遵守规定，但它不会调整大小。 我相信这是一些简单的东西，但我似乎无法做到。

.feature_image {    
    max-height:480px
}

.feature_image img{
    height: 100%;
    width: 100%;
}

这里是HTML代码

<div class="feature_image">
        <img src="img/main-featured-image.png"/>
    </div>

- user3167249

---

http://jsfiddle.net/8qLeE/30/ - Mihai

那不成比例地扩展。 - user3167249

Answer 1

你尝试过将display:block属性加上吗？

完整的CSS代码如下：

.feature_image img {height: 100%; width: 100%; display:block;}

- Johnny

Answer 2

你遇到的问题是因为你没有指定容器的宽度，但同时对图像设置了 width: 100%;。 我测试过了，这个解决方案很好用：

.feature_image {    
    height: 480px;
    width: 480px;
}

.feature_image img{
    height: 100%;
    width: 100%;
}

这种解决方案对于小图片来说是不错的，但它会导致大图片变形，但是有一些解决方案可以克服这个问题。

- Billal Begueradj

Answer 3

为了使用高度100%的图像，您需要指定max-height和height！ :) CSS不知道如何继承100％。希望您能明白。

.feature_image {    
    max-height:480px;
    height: 480px;
}

.feature_image img{
    height: 100%;
    width: 100%;
}

- Cowwando

---

因为宽度没有按比例调整，所以会扭曲图像。 - user3167249

你需要选择你的图片是竖向还是横向比例！基本上，你可以设置高度/宽度为特定值，并根据它们的比例自动调整图像的宽度/高度。除了通过将它们放入具有overflow: hidden的div容器中进行“裁剪”之外，没有其他选项 :) - Cowwando

Answer 4

你需要使用width:auto;。

.feature_image img{

    max-height:480px;
    width: auto;
}

http://jsfiddle.net/8qLeE/51/

- Mihai