在Bootstrap 3中放大图像

Question

如何在bootstrap 3中放大图像？

通过添加.img响应类,可以使Bootstrap 3中的图像响应友好.这适用于max-width:100%; 和身高:汽车; 到图像,以便它很好地缩放到父元素.

使用以下代码,图像可以很好地缩小,但是在较大的屏幕上不能获得父div的大小.

<div class="row">
  <div class="col-md-5" style="background:yellow">
        <div class="image-container" style="background:green">
        <img src="http://placehold.it/350x150" class="img-responsive">
        </div>
    </div>
</div>

怎么做？演示:http://www.bootply.com/8uXBxX8Qjy

Answer 1

您可以将图像宽度设置为100%.img-responsive将max-width设置为100%,图像本身永远不会大于它的实际尺寸.将宽度设置为100%将强制它为其父级的宽度,而不管其实际大小,但请注意,这有时会导致图像变为像素化,具体取决于图像大小以及缩放的大小.