如何使用css代码实现简单的图片自适应 UI模板

效果预览

HTML代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>css实现图片排版效果</title>
        <link rel="stylesheet" href="./ceshi.css">
    </head>
    <body>
<!-- css图片自适应模板 -->
        <div class="centent">
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
            <div class="main">
                <div class="img">
                    <img src="填写图片链接" >
                </div>
            </div>
        </div>
    </body>
</html>

css代码

此处内容已隐藏，请评论后刷新页面查看.

👋 感谢您的观看，对您有用就分享出去吧！

如您有好的资源/素材，可参与创作者激励计划享投稿分成。分成介绍
投稿成功收录，即可获得 1-10元/篇奖励。（重复内容无奖励）

1 如果您喜欢本站,点击这儿赞助下本站，感谢支持！
2 可能会帮助到你：下载帮助 | 报毒说明 | 进站必看 | 广告合作；
3 本站素材资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责；
4 本站所有素材资源来源于网络，仅供学习与参考，请于下载后24小时内删除；
5 若作商业用途，请联系原作者授权，若本站侵犯了您的权益请联系站长进行删除处理；
6 如若转载，请注明文章出处：

THE END