溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css如何讓圖片不變形，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
css讓圖片不變形的實現(xiàn)方法：首先創(chuàng)建一個HTML示例文件；然后在body中添加img標簽并引入圖片；最后通過設(shè)置“max-height”或者“max-width”屬性來實現(xiàn)圖片不變形即可。
如果想要圖片不變形就是設(shè)置max-height或者max-width中的一個，或固定width或者height中的一個。
max-height與max-width屬性設(shè)置元素的最大高度和寬度。
屬性值：
none 默認。定義對元素被允許的最大高度沒有限制。
length 定義元素的最大高度值。
% 定義基于包含它的塊級對象的百分比最大高度。
inherit 規(guī)定應(yīng)該從父元素繼承 max-height 屬性的值。
height與width屬性設(shè)置元素的高度與寬度。
屬性值：
auto 默認。瀏覽器會計算出實際的高度。
length 使用 px、cm 等單位定義高度。
% 基于包含它的塊級對象的百分比高度。
inherit 規(guī)定應(yīng)該從父元素繼承 height 屬性的值。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
float: left;
}
.test1 img {
width: 187.5px;
height: 156.5px;
}
.test2 img {
width: 300px;
height: 100px;
}
.test3 img {
max-width: 300px;
max-height: 100px;
}
.test4 img {
max-width: 100%;
height: 200px;
}
.test5 {
width: 300px;
height: 200px;
}
.test5 img {
max-width: 100%;
max-height: 100%;
}
.test6 {
width: 300px;
height: 100px;
/*overflow: hidden;*/
}
.test6 img {
max-width: 300px;
max-height: 100px;
}
.test7 {
width: 300px;
height: 100px;
/*overflow: hidden;*/
}
.test7 img {
max-width: 300px;
}
</style>
</head>
<body>
<div class="test1">
<img src="1.jpg" />
</div>
<div class="test2">
<img src="1.jpg" />
</div>
<div class="test3">
<img src="1.jpg" />
</div>
<div class="test4">
<img src="1.jpg" />
</div>
<div class="test5">
<img src="1.jpg" />
</div>
<div class="test6">
<img src="1.jpg" />
</div>
<div class="test7">
<img src="1.jpg" />
</body>
</html>效果如圖：
以上是“css如何讓圖片不變形”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼