Question

<div style="width:300px; height:300px; border:1px solid #000000;">
    <img src="output-onlinepngtools.png" alt="base"/>
</div>

假设我的div大小是：300 * 300 图片尺寸为：150 * 150

然后我要如何将尺寸150 * 150的图像放入尺寸为300 * 300的div中？

Answer 1

与此相关的链接： usign高度：自动，宽度：100％使elemnt适合任何大小。

<div style="width:300px; height:300px; border:1px solid #000000;">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" alt="base" style="height: auto; width: 100%;">
</div>

虽然放大图像是不正确的，但良好的做法是，最好具有所需大小的图像，因为放大时会被像素化

对不起，我的英语不好，我来自墨西哥卷饼。

Answer 2

您可以使用纯CSS，而无需将图片装箱成div，看看CSS 3中的 object-fit

img#resized-image {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

<img src="https://picsum.photos/800/500" id="resized-image" alt="image">

此解决方案的唯一问题是兼容性：在IE上不起作用！

与Manuel的解决方案相比，我更喜欢此解决方案，因为如果您的图像与所需结果的比例不同，则可以使用包含，封面，< strong> fit 以您想要的方式获取图像... 例如：如果图像是500 x 1200，但您只需要300 x 300，那么如果您将百分比用作Manuel，则图片将被压缩且很奇怪...但是正如他所说的，最好使用具有相同结果尺寸的图片想要的！

如何将小图像适合大div

2 个答案: