我正在设计自己的图像查看器,但在div标签中将图像显示为背景时遇到问题。
我有2张图片,第一张图片的尺寸大于第二张图片的尺寸。
我想在div的中心显示图像。问题是:
第一张图片需要属性:background-size: contain;
,但是第二张图片需要background-size: auto;
。
我还尝试对第一张图片使用auto
值,结果是:背景尺寸大于div尺寸(d3
类)。
与第二个相同,如果我使用contain
值,则背景尺寸将变大以适合div尺寸(我不想要)。
我的问题:如果背景图像尺寸较大,是否有必要让背景尺寸使用contain
值?
谢谢!
html, body {
width: 100%;
height: 100%;
background-color: #000;
}
div {
border: 1px solid #fff;
background-repeat: no-repeat;
background-position: center;
width: 400px;
height: 200px;
margin-bottom: 5px;
}
.d1 {
background-image: url('https://preview.ibb.co/gXcQpU/tutay.jpg');
background-size: contain;
}
.d2 {
background-image: url('https://image.ibb.co/ggcEip/red.png');
background-size: contain;
}
.d3 {
background-image: url('https://preview.ibb.co/gXcQpU/tutay.jpg');
background-size: auto;
}
.d4 {
background-image: url('https://image.ibb.co/ggcEip/red.png');
background-size: auto;
}
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
最佳答案
代替背景图像,请使用嵌入式图像和flex:
html, body {
width: 100%;
height: 100%;
background-color: #000;
}
div.imageviewer {
display:flex;
flex-wrap:wrap;
}
div[class^=d] {
flex: 0 1 auto;
max-width:400px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
img {
max-width:100%;
height:auto;
max-height:200px;
display:block;
}
div[class^=d] {
border: 1px solid #fff;
/* background-repeat: no-repeat;
background-position: center;
width: 400px;
height: 200px; */
margin-bottom: 5px;
}
/* .d1 {
background-image: url('https://preview.ibb.co/gXcQpU/tutay.jpg');
background-size: contain;
}
.d2 {
background-image: url('https://image.ibb.co/ggcEip/red.png');
background-size: contain;
}
.d3 {
background-image: url('https://preview.ibb.co/gXcQpU/tutay.jpg');
background-size: auto;
}
.d4 {
background-image: url('https://image.ibb.co/ggcEip/red.png');
background-size: auto;
} */
<div class="imageviewer">
<div class="d1"><img src="https://preview.ibb.co/gXcQpU/tutay.jpg"></div>
<div class="d2"><img src="https://image.ibb.co/ggcEip/red.png"></div>
<div class="d3"><img src="https://preview.ibb.co/gXcQpU/tutay.jpg"></div>
<div class="d4"><img src="https://image.ibb.co/ggcEip/red.png"></div>
</div><!-- end image viewer -->
关于html - 如何在“background-size”属性中同时使用两个值“auto”和“contain”?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52791486/