jquery - 最小高度不缩放

Question

我想在所有 IE 浏览器中缩放图像。

我的代码：

<div class="outer"><img src="text.png" /></div>

CSS

.outer {
   position:absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   text-align: center;
}
img {
   min-height: 100%;
}

像这样 img-Tag 使用宽度进行自动缩放。但这在 IE 中不起作用。图像只是垂直缩放。

有谁能够帮我？

score 1 · Accepted Answer

如果您希望图像宽度始终跨越整个浏览器窗口，则必须确保将body父容器（在本例中outer）设置为具有width: 100%，以便宽度百分比对后代正确工作。然后，为图像设置显式宽度，100%高度应自动缩放。

body, .outer {
    width: 100%;
}
img {
    width: 100%;
}

score 0 · Accepted Answer

根据msdn，

如果未明确设置包含块的高度，则元素没有最小高度，并且 min-height 属性被解释为 0%。

您需要明确提及父容器的高度。

body{height: 800px;}  /* set your own height here */

根据站点点

如果包含块的高度没有明确指定（即它取决于内容高度），并且该元素不是绝对定位的，则百分比值被视为零。

2 回答 2