使用CSS裁剪图片以适应div

时间 2019-11-16

标签使用 css 裁剪图片适应 div 栏目 CSS 繁體版

原文原文链接

经过css的object-fit: cover;属性来裁剪图片。
属性参考：
object-fit
效果以下：
CSS控制图片不变形
完整的网页代码以下：css

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>CSS控制图片不变形</title>
    </head>
    <body>
        <div class="w1">
            <h3>500PX</h3>
            <img src="https://n.getimg.net/file/demo/png.png">
        </div>
        <div class="w2">
                <h3>700PX</h3>
                <img src="https://n.getimg.net/file/demo/png.png">
            </div>
        <div class="w3">
                <h3>900PX</h3>
                <img src="https://n.getimg.net/file/demo/png.png">
            </div>
        
        <style>
        .w1{
            border: 1px solid red;
        }
        .w1 img{
            height: auto;
            width: 500px;
            object-fit: cover;
        }
        .w2{
            border: 1px solid blue;
        }
        .w2 img{
            height: auto;
            width: 700px;
            object-fit: cover;
        }
        .w3{
            border: 1px solid pink;
        }
        .w3 img{
            height: auto;
            width: 900px;
            object-fit: cover;
        }


           
        </style>
    </body>
</html>