在響應式div內適合圖像

我是自舉的新手，所以我不完全知道它是如何工作的！
我想要做的是使3個圖像顯示在相同大小的屏幕截圖中。
他們的決議是不同的。
這是每個圖片的HTML在響應式div內適合圖像

<div class="col-sm-2 "> 
 

 
\t \t \t \t <div> <img src="img/test.jpg"> </div> 
 

 
\t \t \t \t <div > <h3>Text Here</h3> </div> 
 
\t \t \t \t 
 
\t \t \t </div>

這是截屏

來源

2017-02-15 Nitish ML

添加class="img-responsive"到您的IMG和同尺寸的顯示器，你可以添加一些客戶類，如my_img，並在那裏設置大小：

my_img{ 
height: 200px 
width: 150px 
}

或將默認高度設置爲父級。比你可以做寬度：100％;身高：100％

所以你知道的是一列。這設定了寬度。比你有一個沒有課程的div。您可以將樣式添加到該div或直接添加到img。

來源

2017-02-15 19:39:24

如果我指定尺寸，我會將div仍然響應？因爲現在如果我將瀏覽器的大小調整爲手機屏幕大小，圖像會垂直堆疊並且其高度不會「看起來」不同，但是當我在桌面上打開時，它會變得明顯不同！寬度是一樣的！只有高度不匹配！ Ty提前！ –

該列在默認情況下爲響應，因此只需給img一個width: 100%;（它將縮放到父元素），並且該div也將縮放到其父元素，即col-sm-2。

來源

2017-02-15 20:07:08 Dotol

我已將圖像寬度設置爲100％，寬度不成問題，但這些圖像的高度不匹配！我試過高度= 100％，但它不會改變！謝謝！ –

如果我理解正確（你應該添加你的代碼與堆棧片段），你可以，而不是增加'寬度：100％;'你可以做'高度：100％;'圖像使用溢出-x：隱藏的;'這樣（如果你的圖像尺寸不一樣），所有圖像的高度相同，如果寬度大於另一個，則父元素將隱藏x軸上的溢出。 – Dotol

在響應式div內適合圖像

回答

相關問題