我正在设计自己的图像查看器,但在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/

10-09 20:35
查看更多