Question

contain

在不裁剪或拉伸的情况下尽可能地缩放图像。

我正在尝试复制在社交网站上看到的CSS效果。它使用3个背景图像形成“后期背景”（用户必须为此付费）。这是理想的效果https://jsfiddle.net/Yun93/7hmgnjod/2/

问题：

但是当我玩这3张图片时，我不明白为什么第二张图片似乎被background-size: contain拉伸了，而其他2张却没有。 它们的宽度相同！他们都应该表现得一样！为什么？

然后将所有background-size: contain更改为background-size: cover，第二张图像的行为也有所不同。 Aagin，为什么？

代码：第二张图片似乎被background-size: contain拉伸

* {
box-sizing: border-box;
}

body {
width: 100vw;
height: 100vh;
} 

.container {
width: 700px;
margin: 0 auto;
}

.bg1 {
background-image: url('https://imgur.com/bTn61bZ.png');
background-size:contain;
/* background-size:cover; */
height: 35px;
}

.bg2 {
background-image: url('https://imgur.com/SjxzI9V.png');
background-size:contain;
/* background-size:cover; */

}


.bg3 {
background-image: url('https://imgur.com/oNTSRHW.png');
background-size:contain;
/* background-size:cover; */
height: 68px;
}

.bg1, .bg2, .bg3 {
width: 100%;
}

.content {
height: 150px;
}

<!DOCTYPE html>
<html lang="en">
<body>
<div class="container">
    <div class="bg1"></div>
    <div class="bg2">
        <div class="content">
            People have their post here.
        </div>
    </div>
    <div class="bg3"></div>
</div>
</body>
</html>

Answer 1

使用public interface ErrorCode { String code(); HttpStatus httpStatus(); } enum GeeksApiErrorCodes implements ErrorCode { GEEK_ALREADY_EXISTS("geeks-1", HttpStatus.BAD_REQUEST); private final String code; private final HttpStatus httpStatus; GeeksApiErrorCodes(String code, HttpStatus httpStatus) { this.code = code; this.httpStatus = httpStatus; } @Override public String code() { return code; } @Override public HttpStatus httpStatus() { return httpStatus; } }时，图像不会被拉伸，但是会缩放以填充可用空间，而不会失去其宽高比。在您的情况下，第二张图像的高度很小（请参见https://i.imgur.com/SjxzI9V.png），因此它可以占据其容器的整个宽度。在小提琴中，容器的宽度为550px，在您的代码中为700 px。

为什么我的背景图片似乎被bgsize“包含”拉伸了？

1 个答案: