Question

我创建了一个我已设置背景图像的图像平铺。但是当我重新调整背景上的平铺图像大小也会重新调整大小时，有没有办法使背景图像保持完整图像，而不管平铺大小。这个比例并不重要。我只需要瓷砖来显示完整的图像。

＆＃13;

.activity-image {
  border-radius: 12px;
  width: auto;
  height: 210px;
  background-image: url('http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg');
  background-size: cover;
}
.tile {
  background-color: #ffffff;
  border-radius: 12px;
  height: auto;
  margin: 0 auto;
}

＆＃13;

<div class="tile">
  <div class="activity-image "></div>
</div>

＆＃13;

jsfiddle - https://jsfiddle.net/9hy3mcun/8/

Answer 1

您可以改用background-size: 100% 100%。第一个值为width，第二个值为height背景。

＆＃13;

 .activity-image {
   border-radius: 12px;
   width: auto;
   height: 210px;
   background-image: url('http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg');
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }

＆＃13;

<div class="tile">
  <div class="activity-image "></div>
</div>

＆＃13;

Answer 2

您的意思是background-size: 100% 100%;吗？

JS Fiddle

Answer 3

您可以为activity-image指定min-width，并将.title设置为overflow：hidden。

 .activity-image{
    border-radius: 12px;
    width: auto;
    height: 210px;
    background-image: url('http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg');
    background-size: cover;
    background-repeat: no-repeat; 
    min-width: 900px; 
  }

   .tile{
    background-color: #ffffff;
    border-radius: 12px;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
  }

修复了div的背景图片

3 个答案: