在 Bootstrap 3 中放大图像

Posted 2023-03-06

【中文标题】在 Bootstrap 3 中放大图像

【英文标题】：Scale up images in Bootstrap 3

【发布时间】：2014-07-20 01:04:32

【问题描述】：

如何在 bootstrap 3 中放大图像？

Bootstrap 3 中的图像可以通过添加变得响应友好 .img 响应类的。这适用于 max-width: 100%;和 高度：自动；到图像，以便它很好地缩放到父级 元素。

使用以下代码，图像可以很好地缩小，但在大屏幕上无法获得父 div 的大小。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<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

【参考方案1】：

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

【讨论】：

您还想添加 height:auto;所以图像不会失真：bootply.com/3JttHDROHJ

你可以，但这是多余的。如果您只在图像上定义一个（高度或宽度），它将保留纵横比。

【参考方案2】：

我之前遇到过这个问题，我使用的是基于 Bootstrap 3 的主题。 我在 Wordpress 现场网站中使用主题。

问题

问题在于，图像包含在img 标记中，并且进一步包含在 Wordpress 自己为图像定义的类中。并且图像未正确缩放。 宽度较小的图像将适合放置图像的主要div 内部，一些宽度较大的图像会超出主要文章的范围。使用这种损坏的CSS 功能对我的网站来说是一个严重的破坏。直到我找到解决方案。

解决方案

找到哪个img标签负责图片缩放，可以在Browser的inspect元素中测试，找到哪个标签负责图片缩放。并将下面的代码放在那里并测试。你的主题可能有不同的标签来负责img 使用 Bootstrap 设置的缩放属性。

对我来说是：

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

主题已经有了，imgvertical-align: middle 存在，所以我测试了 width:100% 和其余的 CSS 规则，并且它有效。您的主题可能有一些不同的 CSS 规则或标签集，找到并应用。但是这两个rules 应该用于正确缩放图像。感谢@David Taiaroa 提供height: auto CSS 规则