3

我有一个 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/

谢谢！

4

4 回答 4

2

嘿，我希望这会帮助你看到下面提到的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%;
}

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

演示

演示2

于 2013-09-04T10:44:35.730 回答
0

您可以使用max-width: 100%;左右width: 100%;图像重新调整大小。不同之处在于，这max-width将阻止图像缩放到其原始尺寸之上，而原始尺寸width将缩放以适合包含的元素。

  • 即，如果您的图像是 100 像素 x 100 像素并且包含元素是 400 像素宽，则使用max-width该图像只会放大到 100 像素 x 100 像素，而使用width它会放大到 400 像素 x 400 像素并变得有颗粒感。

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

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>

如果您要使用简单的单色边框，我可能只会border在图像本身上使用 CSS 属性。

于 2013-09-04T12:18:22.813 回答
0

您可以像这样设置 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%;
}
于 2013-09-04T10:47:13.007 回答
0

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

于 2013-09-04T10:17:06.130 回答