Question

我有一个DIV和一个IMG都设置为100％高度和宽度是自动的。

但我希望DIV在调整浏览器高度的同时调整大小/包裹IMG的宽度（并保持其宽高比）。只是这似乎没有这样做。在任何浏览器中。有人知道为什么会出现这种情况吗？

div {
    height:100%;
    background:red;
    display:inline-block;
    padding:20px;
    box-sizing:border-box;
}

img {
    height:100%;
    display:block;
}

<div>
    <img src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Official_portrait_of_Barack_Obama.jpg"/>
</div>

你可以在这里试试。 div有红色背景。 http://jsfiddle.net/jjktF/3/

谢谢！

Answer 1

嘿，我希望这会帮助您看到下面提到的 CSS

div {
    background: none repeat scroll 0 0 red;
    display: inline-block;
    height: 100%;
    max-width: 100%;
    padding: 20px;
}

img {
    display: block;
    height: auto;
    max-width: 100%;
}

根据您的要求工作.......

DEMO

DEMO2

Answer 2

尝试将div的宽度设置为与图像的宽度相同吗？

Answer 3

您可以像这样设置div宽度。

 div {
    background: none repeat scroll 0 0 red;
    display: inline-block;
    height: 100%;
    width: 100%;
    padding: 20px;
}

img {
    display: block;
    height: auto;
    width: 100%;
}

Answer 4

您可以使用max-width: 100%;或width: 100%;，以便图片重新调整大小。区别在于max-width将阻止图像缩放到其原始尺寸之上，其中width将缩放以适合包含元素。

即。如果你的图像是100px×100px而且包含的元素是400px宽，使用max-width图像将只能扩展到100px到100px，而width它将扩展到400px到400px并变得颗粒状。

之后，只需要确定如何在图像周围包裹“边框”（容器元素）。您可以通过以下两种方式之一完成此操作：

将“border”（容器元素）设置为`display：inline-block; http://jsfiddle.net/wp2eS/
或 - 浮动你的“border”（容器元素）http://jsfiddle.net/wp2eS/1/

CSS

img {
     max-width: 100%;
     /* or */
     width: 100%;
     display: block;
}

在图像上使用display: block;会删除图像下方显示的空间，因为默认情况下图像是内联元素，而该空间是由于下降高度造成的。浮动“边框”（容器元素）会产生相同的效果。

HTML 的

<span class="frame">
    <img src="http://lorempixel.com/200/200/abstract/" />
</span>

如果您打算使用简单的一种颜色边框，我可能只会在图像上使用CSS border属性。

DIV环绕IMG，高度为100％

4 个答案: