圖片和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引導

回答

相關問題