css 如何缩放容器中的图像内容？

jdg4fx2g 于 2023-01-14 发布在其他

关注(0)|答案(2)|浏览(146)

我有一个容器内的图像，根据屏幕上的大小正确缩放。问题是容器不会随着它的高度而缩放。
我希望图像完全填充容器，并保持在相同的图像纵横比。
这是我目前得到的：

.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;
}

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

对图像使用center-image类可使图像按百分比缩放到屏幕大小。
我如何缩放容器的高度，因为它没有为里面的图像留下空间？

css

来源：https://stackoverflow.com/questions/38483482/how-do-i-scale-a-container-for-the-image-contents-inside

2条答案

按热度按时间

jogvjijk1#

我清理了你的css，把你的img改成了一个有红色边框的div，这样我们就可以看到它了。我把容器做成了绿色，这样我们也可以看到它。
这里的要点是给你的img一个relative position，这样它周围的div就会适应。

.img {
    position:relative;
    height:100vh;
  width:93vw;
  border: 1px solid red;
}

.all-box-slideshow {
    padding: 5px 5px;
  border:1px solid green;
}

<div class="all-box-slideshow">
    <div class="img">      
    </div>
</div>

赞(0）回复(0）举报 2023-01-14

93ze6v8z2#

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

.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>

赞(0）回复(0）举报 2023-01-14

我来回答

css 如何缩放容器中的图像内容？

2条答案

相关问题

热门标签

最新问答