css怎么让图片不变形(2)-木庄网络博客

当前第2页返回上一页

<!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>