Question

我试图让我的图片在容器内100％显示，彼此相邻。我碰巧有一个非常宽的屏幕，所以当我走得很宽时，我的图像不会达到他们所处的容器宽度的100％。相反，图像之间的空间开始蔓延。我该如何解决这个问题？

这是我的代码：

Private Sub Test()
    Dim rngBlnk As Range
    Set rngBlnk = Range("col_9395").Rows("3:200").SpecialCells(xlCellTypeBlanks)
End Sub

Answer 1

只需将图像的最大宽度更改为宽度即可：

footer img {
  width:100%; 
  height:auto; 
}

Answer 2

尝试将图片的宽度设置为100％，而不是max-width

Answer 3

只需将图像设置为100％，考虑到您的图像可能会像素化，因为它会尝试适应容器的宽度.... 解决方法是使用巨大的图像（不建议用于演奏）或使用srcset

footer a {
  display:block;
}

footer img {
  width:100%; 
  height:auto; 
}

/*******************************************************/
/******************* Helper Classes ********************/
/*******************************************************/

.no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

<div class="container-responsive">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<footer>
<div class="row no-gutter">
  <div class="col-md-4 col-sm-12 col-lg-4 no-padding">
    <a href="#"><img src="http://via.placeholder.com/150x150" alt="Plan" /></a>
  </div>
  <div class="col-md-4 col-sm-12 col-lg-4 no-padding">
    <a href="#"><img src="http://via.placeholder.com/150x150" alt="Plan" /></a>
  </div>
  <div class="col-md-4 col-sm-12 col-lg-4 no-padding">
    <a href="#"><img src="http://via.placeholder.com/150x150" alt="Plan" /></a>
  </div>
</div>
</footer>

</div> <!-- container -->

响应式CSS img不会达到容器宽度的100％

3 个答案: