Question

我试过

＆＃13;

.slider {
    background: url(../images/slid1.jpg) no-repeat 0px 0px;
    background-size: cover;
max-width: 100%;
    min-height:800px;
 
}
.slider1 {
    background: url(../images/slid2.jpg) no-repeat 0px 0px;
    background-size: cover;
}
.slider2 {
    background: url(../images/slid3.jpg) no-repeat 0px 0px;
    background-size: cover;
}

＆＃13;

＆＃13; 我想知道如何使这个div图像响应？

Answer 1

在您的示例中，您正在使用background-size:cover。此属性使图像缩放到最小尺寸，其中图像的宽度和高度都至少是容器的大小。 background-size:contain可能会提供您想要的行为。它与封面相反，因为它试图在分配的空间中将图像缩放到尽可能大而不会剪裁。

＆＃13;

.img
{
  background-image:url(https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d);
  background-repeat:no-repeat;
  background-size:contain;
  min-height:400px;
  max-width:50%;
}

＆＃13;

<div class="img">
</div>

＆＃13;

如何使div图像响应

1 个答案: