【CSS实现图片等比例缩小不变形】

来源：互联网发布：网络招投标系统编辑：程序博客网时间：2024/06/05 22:45

【CSS实现图片等比例缩小不变形】

<!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>        <div 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>        </div>    </body></html>

阅读全文

1 0