Question

如何在bootstrap 3中放大图像？

Bootstrap 3中的图像可以通过添加响应友好 .img响应类的。这适用于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％将强制它为其父级的宽度，而不管其实际大小，但请注意，这有时会导致图像变为像素化，具体取决于图像大小以及缩放的大小。

Answer 2

我以前遇到过此问题，我使用的是基于Bootstrap 3的主题。我在Wordpress实时网站中使用了主题。

问题

问题在于，图像包含在img标记中，并且进一步包含在Wordpress自己为图像定义的类中。并且图像缩放不正确。具有较低宽度的图像将适合放置图像的主体div的内部，某些具有较大宽度的图像将位于主体的外部。而且，使用这种中断的CSS功能对我的网站造成了严重破坏。直到找到解决方案为止。

解决方案

查找哪个img标签负责图像缩放，您可以在浏览器的inspect元素中进行测试，并找到哪个标签负责图像缩放。并将以下代码放在此处并进行测试。而且您的主题可能具有负责通过Bootstrap设置的img缩放属性的不同标签。

对我来说是

img{
vertical-align: middle;
width: 100%;
height: auto;
}

该主题已经存在img{vertical-align: middle}，因此我测试了width:100%和其余CSS规则，并且该规则有效。您的主题可以设置一些不同的CSS规则或标记，然后找到并应用。但是应该使用这两个rules来正确缩放图像。感谢@David Taiaroa支持height: auto CSS规则

在Bootstrap 3中放大图像

2 个答案: