图片和 Twitter 引导程序答案

【问题标题】：Images and Twitter Bootstrap图片和 Twitter 引导程序
【发布时间】：2017-06-13 20:54:00
【问题描述】：

我刚开始使用引导程序编写网站代码，但我在放置在特定网页上的一些图像时遇到了问题。我希望所有四个图像的大小都相同，但其中一些不是。图片分辨率的改变会改变它在网页上的显示方式吗？？

  <div class="row row-offcanvas row-offcanvas-right">
     <div class="row placeholders">
        <div class="col-xs-6 col-sm-3 placeholder">
          <a href="google.com">
            <img src="/images/book-photo.jpg"" width="300" height="200" class="img-responsive img-rounded">
            <h4>Books</h4>
          </a>
        </div>
        <div class="col-xs-6 col-sm-3 placeholder">
          <img src="/images/sports-photo2.jpg" width="300" height="200" class="img-responsive img-rounded">
          <h4>Sports</h4>
        </div>
        <div class="col-xs-6 col-sm-3 placeholder">
          <img src="/images/concerts-photo.jpg" width="300" height="200" class="img-responsive img-rounded">
          <h4>Concerts</h4>
        </div>
        <div class="col-xs-6 col-sm-3 placeholder">
          <img src="/images/sublease-photo.jpg" width="200" height="200" class="img-responsive img-rounded">
          <h4>Subleases</h4>
          <span class="text-danger">Coming Soon</span>
        </div>
      </div>

不同图像尺寸的示例：

【问题讨论】：

代码中有错别字。 src="/images/book-photo.jpg"" - 最后的双引号需要去掉。
你为什么在使用.img-responsive时在每张图片上设置width和height？
我修正了错字，但第二张和第四张图片的尺寸仍然不同。另外，我不应该为 .img-responsive @J 使用宽度和高度吗？提图斯？如果不是，请解释原因。我还在学习。
.img-responsive 的整个想法是动态设置图像的大小以在列中占用尽可能多的空间，具体取决于视口的大小。如果您有静态大小的图像，则不应使用 .img-responsive。
查看您提供的标记的样式表会很有帮助。

标签： html css twitter-bootstrap

【解决方案1】：

如果您希望它们占用相同数量的空间，请将它们设置为 div 的背景。 Background-size:cover 将使其占据 div 的整个高度/宽度，而不会拉伸照片。它只会将侧面切掉一点以使其保持相同的比例。 background-position:center center 将使照片在 div 中垂直和水平居中。您只需要在 div 上设置一个高度即可显示背景。

【讨论】：

我以前从未这样做过。我是否必须去编辑引导 css 文件？
嗯...这是一个很酷的解决方案。 div 还会响应吗？
是响应式的，不，您不需要编辑引导 css 文件，这是我为这个 YMCA 网站所做的示例，cyedc.org 这是主页上的 3 个块。对于这个，我在列中放置了一个 div 并为 div 设置了一个高度，但那是因为我需要在它上面放置文本。你可以像我一样做，或者只是把它放在列本身。