首頁 > 文章 > web前端 > css怎麼讓圖片不變形

css怎麼讓圖片不變形

藏色散人原創: 2021-04-08 09:36:226123瀏覽

css讓圖片不變形的實作方法：先建立一個HTML範例檔案；然後在body中加入img標籤並引入圖片；最後透過設定「max-height」或「max-width」屬性來實現圖片不變形即可。

css怎麼讓圖片不變形

本文操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。

如果想要圖片不變形就是設定max-height或是max-width中的一個，或固定width或height中的一個。

max-height與max-width屬性設定元素的最大高度和寬度。

屬性值：

none 預設。定義對元素被允許的最大高度沒有限制。

length 定義元素的最大高度值。

% 定義基於包含它的區塊級物件的百分比最大高度。

inherit 規定應該從父元素繼承 max-height 屬性的值。

height與width屬性設定元素的高度與寬度。

屬性值：

auto 預設。瀏覽器會計算出實際的高度。

length 使用 px、cm 等單位定義高度。

% 是基於包含它的區塊級物件的百分比高度。

inherit 規定應該從父元素繼承 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" / alt="css怎麼讓圖片不變形" >
    </div>
    <div class="test2">
        <img  src="1.jpg" / alt="css怎麼讓圖片不變形" >
    </div>
    <div class="test3">
        <img  src="1.jpg" / alt="css怎麼讓圖片不變形" >
    </div>
    <div class="test4">
        <img  src="1.jpg" / alt="css怎麼讓圖片不變形" >
    </div>
    <div class="test5">
        <img  src="1.jpg" / alt="css怎麼讓圖片不變形" >
    </div>
    <div class="test6">
        <img  src="1.jpg" / alt="css怎麼讓圖片不變形" >
    </div>
    <div class="test7">
        <img  src="1.jpg" / alt="css怎麼讓圖片不變形" >
</body>
</html>

效果如圖：

css怎麼讓圖片不變形

#【推薦學習：css影片教學】

以上是css怎麼讓圖片不變形的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css怎麼設定顯示隱藏動畫下一篇：css怎麼設定顯示隱藏動畫

看更多