Question

我有4张尺寸为500x500的照片。我遇到的问题是最后一张图片跨越了页面，造成了不必要的空间。如何从页面中包含它？

HTML：

<div id="collage">
<div class="row">

<div class="col-md-3">
    <img src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg>
</div>

<div class="col-md-3">
    <img src=https://www.roys.co.uk/media/wysiwyg/FASHION/MENSWEAR-AW16-JOULES-COAT.jpg>
</div>

<div class="col-md-3">
    <img src=https://s-media-cache-ak0.pinimg.com/736x/b1/5e/38/b15e38cd4864c85a52897d906a88710c.jpg>
</div>

<div class="col-md-3">
    <img src=https://static1.squarespace.com/static/56b6a4bd07eaa0d2d0eddb7f/58678682bebafb6e8b0a4e2a/5867868b893fc0dff9edd97d/1483179664063/Andrew+Belliot-011.jpg?format=500w>
</div>

</div>
</div>

CSS：

#collage img {
background-size: cover;
}

Answer 1

尝试添加 .img-responsive 类，如下所示：

<div id="collage">
<div class="row">

<div class="col-md-3">
    <img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg>
</div>

<div class="col-md-3">
    <img class="img-responsive" src=https://www.roys.co.uk/media/wysiwyg/FASHION/MENSWEAR-AW16-JOULES-COAT.jpg>
</div>

<div class="col-md-3">
    <img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/b1/5e/38/b15e38cd4864c85a52897d906a88710c.jpg>
</div>

<div class="col-md-3">
    <img class="img-responsive" src=https://static1.squarespace.com/static/56b6a4bd07eaa0d2d0eddb7f/58678682bebafb6e8b0a4e2a/5867868b893fc0dff9edd97d/1483179664063/Andrew+Belliot-011.jpg?format=500w>
</div>

</div>
</div>

Answer 2

将图像标记的最大宽度设置为100％，就像下面的css代码一样，可以解决您的问题 img {max-width：100％; }

Answer 3

试试这个css

#collage img {
  width: 100%;
}

包含div中的图像

3 个答案: