如何使用css設置相同的圖像高度和寬度？不是背景圖像

我必須設置具有相同高度和寬度的圖像。我有三個不同高度和寬度的圖像。我必須在框中顯示相同的尺寸。你能幫我嗎？如何使用css設置相同的圖像高度和寬度？不是背景圖像

ul { 
 
    list-style: none; 
 
} 
 

 
ul li { 
 
    width: 200px; 
 
    height: 200px; 
 
    display: inline-block; 
 
    border: 1px solid #000; 
 
} 
 

 
ul li img { 
 
    width: 100%; 
 
}

<ul> 
 
    <li><img src="http://i.imgur.com/tI5jq2c.jpg"></li> 
 
    <li><img src="http://i.imgur.com/37w80TG.jpg"></li> 
 
    <li><img src="http://i.imgur.com/B1MCOtx.jpg"></li> 
 
</ul>

來源

2017-06-04 Narendra Verma

由於背景圖像有最好的瀏覽器支持，你爲什麼不能使用？ – LGSon

因爲我從數據庫中提取圖像，並且我不知道如何使用帶有數據庫的CSS顯示圖像 –

Mr.LGSon，我的問題不重複。這個答案是一個替代背景圖片，我問的是沒有背景。 –

只需添加ul li img類height: 100%;，也將努力

ul{ 
 
    list-style: none; 
 
} 
 
ul li{ 
 
\t width: 200px; 
 
\t height: 200px; 
 
\t display: inline-block; 
 
\t border: 1px solid #000; 
 
} 
 
ul li img{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
}

<ul> 
 
    <li><img src="http://i.imgur.com/tI5jq2c.jpg"></li> 
 
    <li><img src="http://i.imgur.com/37w80TG.jpg"></li> 
 
    <li><img src="http://i.imgur.com/B1MCOtx.jpg"></li> 
 
</ul>

來源

2017-06-04 12:27:28

恆定高度添加到您的圖像

ul { 
 
    list-style: none; 
 
} 
 

 
ul li { 
 
    width: 200px; 
 
    height: 200px; 
 
    display: inline-block; 
 
    border: 1px solid #000; 
 
} 
 

 
ul li img { 
 
    width: 100%; 
 
    height: 200px; 
 
}

<ul> 
 
    <li><img src="http://i.imgur.com/tI5jq2c.jpg"></li> 
 
    <li><img src="http://i.imgur.com/37w80TG.jpg"></li> 
 
    <li><img src="http://i.imgur.com/B1MCOtx.jpg"></li> 
 
</ul>

來源

2017-06-04 12:16:21 rakesh

如何使用css設置相同的圖像高度和寬度？不是背景圖像

回答

相關問題