如何在不削减图像尺寸的情况下适合背景图像特定尺寸

Question

我在下面的div中有一个背景图像，但图像被切断了

有没有办法在不切断背景图像的情况下显示背景图像？

Answer 1

这实际上是一个非常简单的修复方法。其中大部分归结为使用百分比来指定图像的大小而不是像素。

div {
    background: url(img.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
} 

Answer 2

你可以使用background-size: cover;属性来使图像居中，但是你想要实现的目标总是不可能的，除非背景图像的尺寸完全匹配容器div的尺寸;否则，它将始终导致图像失真。我猜background-size: cover;是最近似的。

＆＃13;

＆＃13;

.contain_img {
  width: 300px;
  height: 200px;
  background-image: url(https://unsplash.it/200/300?image=1082);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
}

＆＃13;

<div class="contain_img"></div>

＆＃13;

＆＃13;

＆＃13;