0

我正在尝试制作具有不同图像和不同尺寸的图像库。我已经包含了一个图片链接来解释我想要什么。我用 4 个 div 排成一行，每个 div 都包含一个图像。图像具有宽度和高度。但是我的图像有不同的尺寸。即600X500。我正在使用引导程序。

如何让图像填满整个 div (400 X 400) 并且仍然响应？

我试图给图像一个固定的高度和宽度，但是图像不再响应。

<div class="row">
<div class="square col-xs-6 col-md-3">
  <div>
    <img src="" class="image-responsive">
  </div>
</div>   
<div class="square col-xs-6 col-md-3">
  <div>
    <img src="" class="image-responsive">
  </div>
</div>  
<div class="square col-xs-6 col-md-3">
  <div>
    <img src="" class="image-responsive">
  </div>
</div>
<div class="square col-xs-6 col-md-3">
  <div>
    <img src="" class="image-responsive">
  </div>
</div>

CSS

.square {min-width: 400px; min-height: 400px;}

这就是我想要做的，某种图片库

4

2 回答 2

1

你可以这样做：

.square > div > img {
  min-width: 400px; 
  min-height: 400px;
  max-width: 100%; 
  max-height: 100%;
}

随着设备的屏幕变小，这将迫使它减小。

于 2015-10-06T19:38:53.793 回答
0

试试 .square {width:100%; 高度：自动；}

图像将始终缩放以适合 div 元素。

于 2015-10-06T19:45:06.650 回答