Question

我有一个三列的页面，col-md-4就像一个缩略图方法然后我有另一个页面用col-md-8。在两者中，我必须显示一个图像，我想知道我是否可以为两者使用相同的图像，或者如果最好有2张图像（每个图像都有适当大小）。

<div class="col-md-4 col-sm-4">
   <div class="product">

         <a href="">
             <img src="/media/{{ p.img }}" style="max-width: 100%;max-height: 100%;/>                                         </a>

     <div class="text">
         <h3>Some text</h3>
     </div>
</div>

#product img{
max-width: 100%;
max-height: 100%;
}

如何调整图像大小以适应3列网格和8列（并保持响应）。

拥有两个不同的图像会更好吗？（一大一小）。

Answer 1

在图片上使用class="img-responsive"。

http://getbootstrap.com/css/#images请参阅响应式图像的文档。图像将缩放为列大小。

您应该使用适合较大列的格式，因为图像通常会缩小，但在放大时会变得像素化。

在小插槽中使用大图像的缺点是图像越大，文件越大，因此加载速度越慢，尤其是在处理3g手机时。

bootstrap col-div中的图像大小

1 个答案: