Question

假设我有一个持有img元素的方形div。

方形div是40乘40.图像是160乘80.

如果我只是将div上的大小设置为40 x 40，那么图像的大小将调整为40到20.我希望它的大小调整为最短长度（80），调整大小（80 x 40））然后居中（即所以在40x40 div内你会有一个调整大小的img（80x40），x坐标为20到60）

当然，如果图像是80乘160，那么新图像将是40乘80.以y = [20,60]为中心。

注意：在我的情况下，我知道我的div的尺寸，它是方形的。我不知道图像的尺寸。如果解决方案也适用于div的任何维度（非方形和未知），那将是非常棒的。

Answer 1

您可以使用背景技术根据需要显示图像

<div class="cropped img1"></div>
<style>
.img1 {background-image: url('http://megasite.net/yourimage.jpg');}
.cropped {width: 40px;height: 40px;background-position: center; background-size: cover;}
</style>

Answer 2

这可以通过CSS3 background-size: cover;

实现

渲染图像，保留其固有比例，包含在背景定位区域内或覆盖背景定位区域的最大尺寸。如果图像没有固有的比例，那么它将以背景定位区域的大小呈现。

https://developer.mozilla.org/en-US/docs/CSS/background-size

使用css居中并调整任何大小的图像到div包装器？

2 个答案: