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

Question

所以我有一个大尺寸的图片，尺寸为1000x250px，我想用作我页面的徽标。我的问题是，我如何相应缩小图像缩小尺寸，以便在布局中更好地适应。说大小为500x80px？

希望有人可以提供帮助！

Answer 1

您可以使用图像的width属性。这会缩放你的图像（但是mb21告诉你的尺寸会很大）。

Answer 2

您可以使用

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

但是你无法保持这个比例......

想想用Gimp ......

之类的东西修改图像的最佳方法

Answer 3

此处您可以使用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的宽度越多，徽标的高度就越小，达到适当的比例。