Question

我在容器内部有一个图像，可以根据屏幕上的大小正确缩放。我遇到的问题是容器不会随着它高度缩放。

我希望图像完全填满容器并保持图像的纵横比。

这是我到目前为止所得到的：

＆＃13;

.center-img {
	image-orientation: from-image;
	position: absolute;
    margin: auto;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	width: 98%;
	height: auto;
}

.all-box-slideshow {
	padding: 5px 5px;
	width: 98.3%;
	height: auto;
}

＆＃13;

<div class="all-box-slideshow">
    <div>
      <img class="center-img" src="images/image.jpg">
    </div>
</div>

＆＃13;

使用＆＃34;中心图像＆＃34;图像上的类使图像按百分比缩放到屏幕大小。

我无法弄清楚如何缩放容器的高度，因为它没有为图像留出空间。

先谢谢。

Answer 1

我清理了你的css并将你的img变成了一个带红色边框的div，所以我们可以看到它。我用绿色制作的容器也可以看到它。

这里的要点是给你的img一个relative position所以它周围的div会适应。

JS fiddle here for example

Answer 2

这将强制图像完全填充父容器，并相应地缩放。

.center-img {
	image-orientation: from-image;
	position: absolute;
    margin: auto;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
    
	width: 98%;
	height: 98%;
}

.all-box-slideshow {
	padding: 5px 5px;
	width: 98.3%;
	height: auto;
}

<div class="all-box-slideshow">
    <div>
      <img class="center-img" src="http://placehold.it/350x150">
    </div>
</div>

如何缩放内部图像内容的容器？

2 个答案: