0

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

方形 div 为 40 x 40。图像为 160 x 80。

如果我只是将 div 上的大小设置为 40 x 40，则图像将调整为 40 x 20。我希望将其调整为最短长度（80）的长度，调整大小（80 x 40）然后居中（即在 40x40 div 内，您将有一个调整大小的 img（80x40），其中 x 坐标显示为 20 到 60）

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

注意：就我而言，我知道我的 div 的尺寸，它是正方形的。我不知道图像的尺寸。如果该解决方案也适用于 div 的任何维度（非正方形和未知），那就太棒了。

4

2 回答 2

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>
于 2013-04-25T05:28:09.387 回答
0

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

图像被渲染，保持其固有比例，以包含或覆盖背景定位区域的最大尺寸。如果图像没有固有比例，则以背景定位区域的大小进行渲染。

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

于 2013-04-25T13:17:33.017 回答