如何调整 div 中的图像大小以覆盖？ [复制]

Posted 2023-03-05

【中文标题】如何调整 div 中的图像大小以覆盖？ [复制]

【英文标题】：How to resize image in div to cover? [duplicate]

【发布时间】：2016-09-06 23:35:34

【问题描述】：

好的，我想你以前听过这个……我试图找到解决方案，但找不到。我有一个覆盖屏幕左侧 50% 的容器。在容器内部，我想要一个图像来覆盖空间，而不是拉伸。 此时的css是：

height: auto;
max-width: 100%;

请帮忙！！！

【问题讨论】：

将图片设置为容器上的背景图片并设置为background-size: cover;

【参考方案1】：

• 如果您的图片大于您希望它覆盖的空间，并且您使用 img 标签来做到这一点，请将其添加到您的 css：

img width: auto; height: auto;

• 如果您使用 div 将图像作为背景图像放置，请使用：

div 
    background-image: url("yourimage.png");
    background-repeat: no-repeat;
    background-size: contain;

【参考方案2】：

您可以将其用作背景并使用以下属性：

background-repeat: no-repeat;
background-position: center center;
background-size: cover;

https://jsfiddle.net/alexndreazevedo/upn7jwfs/

【参考方案3】：

在您的 div 中添加 img 并将图像的宽度和高度设置为 100%；

<div> <img src=""/> </div>

css

img 
width: 100%;
height: 100%;