如何适应背景图像的特定大小，而不剪切图像尺寸

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;是最接近的。

.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%; 
 
}

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