如何在 Bootstrap V3 中将图像缩小到特定尺寸？答案

【问题标题】：How can I scale down a image down to a particular dimension size in Bootstrap V3?如何在 Bootstrap V3 中将图像缩小到特定尺寸？
【发布时间】：2014-07-16 10:42:15
【问题描述】：

所以我有一张尺寸为 1000x250 像素的大图片，我想将其用作页面的徽标。我的问题是，如何将图像相应地缩小到缩小的尺寸，使其更适合布局。说成 500x80px 的大小？

希望有人能帮忙！

【问题讨论】：

使用 Photoshop 之类的？如果您只是更改 HTML/CSS 中的某些内容，客户端仍然需要下载整个巨大的图像...

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

如何在不影响图像质量的情况下使用 CSS 调整图像大小。

HTML

/* Containing Elelment */

      <div id="logo-base"> 

       <img src="your-logo-image-url" />

     </div><!-- End Logo Base -->

CSS

/* Containing Element CSS */

     #logo-base {
     width: 200px; /* Your chosen height */
     height: auto; /* Must be auto */
    }

    /* Logo image CSS */

     #logo-base img {
     width: 100%; /* Must be 100% */
     height: auto; /* Must be auto */
    }

上面的工作原理如下：我们遵守包含 DIV 的宽度（100%），但我们允许它根据需要进行拉伸，这样调整大小的过程是成比例的。将包含的 DIV 的宽度减小得越多，徽标的高度就越减小到适当的比例。

【讨论】：

【解决方案2】：

你可以使用

    <img src='myImg' style="width:50%; height:31%" />

但你将无法保持比例......

想想用 Gimp 之类的东西修改图像的最佳方法......

【讨论】：

【解决方案3】：

您可以使用图像的宽度属性。这将缩放您的图像（但大小将保持 mb21 告诉您的大）。

【讨论】：