源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: 图片横向排列并且保持截取图片中间不变形的CSS方法 [打印本页]
作者: 欧阳锋    时间: 2020-6-3 13:31
标题: 图片横向排列并且保持截取图片中间不变形的CSS方法


调用图片的时候一般图片大小不一致造成图片横排变形，比如：

(, 下载次数: 55)


完全变形了，那么进行代码样式优化后的效果为（取图片中间，你也可以改动代码从图片顶部截取）：

(, 下载次数: 56)


整理代码如下：

  1. HTML部分
  2. <li> <a href="1.jpg" title="测试" alt="测试"><dt><img src="1.jpg" title="测试" alt="测试"></dt></a> </li>
  3. <li> <a href="1.jpg" title="测试" alt="测试"><dt><img src="1.jpg" title="测试" alt="测试"></dt></a> </li>
  4. <li> <a href="1.jpg" title="测试" alt="测试"><dt><img src="1.jpg" title="测试" alt="测试"></dt></a> </li>
  5. <li> <a href="1.jpg" title="测试" alt="测试"><dt><img src="1.jpg" title="测试" alt="测试"></dt></a> </li>
复制代码

  1. CSS部分
  2. li {
  3.     list-style:none; width:300px;
  4.     float:left;
  5.     margin:10px
  6.     }
  7. li dt {
  8.     overflow: hidden;
  9.     text-align: center;
  10.     padding-bottom: 100%!important;
  11.     position: relative;
  12. }
  13. li dt img {
  14.     width: 100%;
  15.     max-height: 200px;
  16.     transition: all 1.2s;
  17.     -moz-transition: all 1.2s;
  18.     -webkit-transition: all 1.2s;
  19.     -o-transition: all 1.2s;
  20.     object-fit: cover;
  21.     position: absolute;
  22.     top: 0;
  23.     left: 0;
  24.     display: block;
  25.     height: 100%;
  26.     width: auto;
  27.     min-height: 100%;
  28.     min-width: 100%;
  29.     max-width: 300%;
  30. }
复制代码







欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3