如何在div中调整图像大小以覆盖？

Question

好吧，我猜你以前听过这个...我试图找到一个解决方案，但找不到一个。我有一个覆盖屏幕左侧50％的容器。在容器内部，我希望图像覆盖空间，而不是拉伸。 Css此刻是：

height: auto;
max-width: 100%;

请帮助!!!

Answer 1

•如果您的图片大于您想要覆盖的空间，并且您使用img标记来执行此操作，请将其添加到您的css中：

img {width: auto; height: auto;}

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

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

Answer 2

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

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

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

Answer 3

在div中添加img，并在100％中设置图像的宽度和高度;

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

CSS

img {
width: 100%;
height: 100%;
}