图片和Twitter引导

-4

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

<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>

例子：

来源

2017-06-13 ChaseRun

代码中存在拼写错误。 src =“/ images/book-photo.jpg”“ - 最后一个双引号需要移除 – Gerard

为什么在使用'.img-responsive'时在每张图片上设置'width'和'height'？ –

I修正了错字，但第二张和第四张图片仍然是不同的尺寸。另外，我是否应该使用.img-responsive @J。Titus的宽度和高度？如果不是，请解释原因。我仍在学习。 – ChaseRun

如果您希望他们采取了同样的空间内，设置这些作为替代的div的背景。背景大小：封面将使其占据整个div的高度/宽度，而不会拉伸照片。它会稍微切断双方，使其保持相同的比例。背景位置：中心将使照片在div中垂直和水平居中。你只需要在div上放置一个高度来显示背景。

来源

2017-06-13 12:54:00

我从来没有这样做过。我将不得不去编辑bootstrap css文件吗？ – ChaseRun

嗯...这是一个很酷的解决方案。这个divs会不会有反应？ – Belder

是的，你不需要编辑bootstrap css文件，这里是我为YMCA网站做的一个例子，https://cyedc.org/它是主页上的3个块。对于这一个，我把一个div放在列中，给了div一个高度，但那是因为我需要在它上面放置文本。你可以做同样的事情，或者把它放在列上。 –

图片和Twitter引导

回答

相关问题