Question

我有一个div，可以是任何大小的矩形。然后在那个div中我有一个图像，它将永远是一个正方形。如何使图像尽可能大，同时仍然能够适应div。有没有办法我可以设置图像的大小等于max（divWidth，divHeight）而不使用javascript？感谢您的回复。

Answer 1

尝试以下CSS：

img.yourClass {
    max-height: 100%;
    max-width: 100%
}

演示：http://jsfiddle.net/Zs8C8/

Answer 2

CSS

div {
    width: 50px; // or whatever
    height: 95px; // or whatever
    overflow: hidden; // prevents overlap if automatically adjusted height of img will exceed height of this parent div
}
img {
    width: 100%;// will always fit parent div, height wil adjust automatically
}

HTML

<div>
    <img src="whatever">
</div>

Answer 3

您可以指定img样式width: 100%和/或height: 100%

<div class="imgContainer">
    <img src="..."></img>
</div>

<style>
.imgContainer{
    width: 200px; /*the size is up to you*/
    height: 200px; /*the size is up to you*/
}

.imgContainer>img{
    width: 100%;
}
</style>

如果我设置img width: 100%;，图像高度将自动缩放

以下是示例：http://jsfiddle.net/uN2K4/

如何使方形图像适合矩形div？

3 个答案: