Artikel Topik pembelajaran Muat turun Soal Jawab Kamus Pengaturcaraan Permainan kemas kini terkini

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Rumah > hujung hadapan web > tutorial css > teks badan

CSS实现图片等比例缩小不变形的实例分析

黄舟

Lepaskan： 2017-09-30 09:28:32

asal

2898 orang telah melayarinya

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CSS实现图片等比例缩小不变形</title>
        <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    </head>
    <style type="text/css">
        .wrap {
            width: 90%;
            height: 550px;
            border: 1px solid #000;
            margin: 50px auto;
        }
        ul {
            width: 100%;
            height: 100%;
        }
        ul li {
            overflow: hidden;
            float: left;
            width: 350px;
            height: 350px;
            border: 1px solid #aaa;
            margin: 90px 0 0 43px;
        }
        ul li img {
            /*等宽缩小不变形*/
            /*width: 100%;*/
            /*二选一*/
            /*等高缩小不变形*/
            height: 100%;
        }
    </style>
    <body>
        <p class="wrap">
            <ul>
                <li>
                    <img src="../images/bg1.jpg" alt="" />
                </li>
                <li>
                    <img src="../images/bg2.jpg" alt="" />
                </li>
                <li>
                    <img src="../images/bg3.jpg" alt="" />
                </li>
            </ul>
        </p>
    </body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci CSS实现图片等比例缩小不变形的实例分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

css

sumber：php.cn

Artikel sebelumnya：css动画之小球撞壁反弹效果的实现实例 Artikel seterusnya：CSS如何实现hover动态效果的示例代码

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang