当前位置:首页 > 技术教程>

竖向长方形图片横向正方形列表排列并取图片中间不变形的CSS方法

发表日期:2020-06-12 14:28:02文章编辑:池州网站建设浏览次数:7193 标签:    

先看下这个图片:一个竖向的长方形图片,需求就是:通过CSS的方法使展示的时候竖向图片要实现横向正方形排列而且图片不能变形。

竖向长方形图片横向正方形列表排列并取图片中间不变形的CSS方法

一般排列后效果为:

竖向长方形图片横向正方形列表排列并取图片中间不变形的CSS方法

完全变形了,那么进行代码样式优化后的效果为(取图片中间):

竖向长方形图片横向正方形列表排列并取图片中间不变形的CSS方法

墨鱼整理代码如下:

HTML部分:

<li> <a href="1.jpg" title="测试" alt="测试"><dt><img src="1.jpg" title="测试" alt="测试"></dt></a> </li>
<li> <a href="1.jpg" title="测试" alt="测试"><dt><img src="1.jpg" title="测试" alt="测试"></dt></a> </li>
<li> <a href="1.jpg" title="测试" alt="测试"><dt><img src="1.jpg" title="测试" alt="测试"></dt></a> </li>
<li> <a href="1.jpg" title="测试" alt="测试"><dt><img src="1.jpg" title="测试" alt="测试"></dt></a> </li>

CSS部分:

li {
    list-style:none; width:300px;
    float:left;
    margin:10px
    }
li dt {
    overflow: hidden;
    text-align: center;
    padding-bottom: 100%!important;
    position: relative;
}
li dt img {
    width: 100%;
    max-height: 200px;
    transition: all 1.2s;
    -moz-transition: all 1.2s;
    -webkit-transition: all 1.2s;
    -o-transition: all 1.2s;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: auto;
    min-height: 100%;
    min-width: 100%;
    max-width: 300%;

 

全站导航

其他新闻

帝国CMS获取当前页面顶级栏目名称和连接,包含列表和内容页面使用

只在栏目页和内容页使用,首页使用无效,因为首页获取不到当前栏目的ID,所以无法...

日期:2020-06-12

竖向长方形图片横向正方形列表排列并取图片中间不变形的CSS方法

先看下这个图片:一个竖向的长方形图片,需求就是:通过CSS的方法使展示的时候竖...

日期:2020-06-12

CSS实现单行、多行文本溢出显示省略号

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellips...

日期:2020-03-25

帝国cms给最近新文章有new图标

<ul> [e:loop={栏目ID,显示条数,操作类型,只显示有标题图片}] <? $newimg="...

日期:2019-10-21

帝国CMS灵动标签调用专题信息

帝国CMS内置的专题调用标签总是不理想,调用不方便,还是灵动标签调用来得方便...

日期:2019-09-14

客户案例

南京某环境治理公司手机响应式网站(基于bootstarp和帝国CMS)

网站首页有部分延迟加载的内容,截图的时候没有全部截下来。各位可以直接到对...

日期:2019-09-23

池州某信息技术服务公司网站

网站使用的是PC+移动端判断跳转的。主色调为蓝色,突出科技主题,呈现服务宗旨...

日期:2019-06-18

池州某加工生产企业工程公司官方网站

...

日期:2019-05-26

某县生产力促进中心官方网站

...

日期:2019-05-26

广东中山某大型机械工程公司官方网站

这是广东一家大型进出口机械设备制造公司,实力雄厚。网站是响应式的。客户对...

日期:2018-11-06