CSS圖像大小，如何填充，不拉伸？我有一個(gè)圖像，我想設(shè)置一個(gè)特定的寬度和高度（以像素為單位）但如果我使用css（width:150px; height:100px）設(shè)置寬度和高度，圖像將被拉伸，它可能是丑陋的。如何使用CSS 將圖像填充到特定大小，而不是拉伸它？填充和拉伸圖像的示例：原始圖片：拉伸圖像：填充圖片：請(qǐng)注意，在上面的填充圖像示例中：首先，將圖像調(diào)整為150x255（保持縱橫比），然后將其裁剪為150x100。
3 回答
慕勒3428872
TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超6個(gè)贊
有三個(gè)不同之處：
沒(méi)有必要在元素上提供
height和width屬性，image因?yàn)樗鼈儗⒈粯邮礁采w。
所以寫(xiě)這樣的東西就足夠了。<img class="cover" src="url to img ..." />
提供
width:100%風(fēng)格。
如果您使用bootstrap并希望圖像拉伸所有可用寬度，這將非常有用。指定
height屬性是可選的，您可以根據(jù)需要?jiǎng)h除/保留該屬性.cover { object-fit: cover; width: 100%; /*height: 300px; optional, you can remove it, but in my case it was good */}
添加回答
舉報(bào)
0/150
提交
取消