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

来源：懂视网责编：小采时间：2020-11-27 18:50:05

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

CSS实现图片等比例缩小不变形的实例分析:<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS实现图片等比例缩小不变形</title> <link rel="stylesheet" type="text/css" href="../css/reset.css&

推荐度：

点击下载本文 文档为doc格式

导读CSS实现图片等比例缩小不变形的实例分析:<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS实现图片等比例缩小不变形</title> <link rel="stylesheet" type="text/css" href="../css/reset.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>
 <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>

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

推荐度：

点击下载本文 文档为doc格式

标签：图片实例 css

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐