您的当前位置:首页正文

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

2020-11-27 来源:爱够旅游网


<!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>
显示全文