纵向长正方形照片横着正正方形目录排序并取照

首先看下这一照片:一个纵向的长正方形照片,要求便是:展现的情况下要完成横着正正方形排序。

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

一般排序后实际效果为:

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

彻底形变了,那麼开展编码款式提升后的实际效果为(取照片正中间):

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

墨鱼梳理编码以下:

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%;


官方网手机微信二维码× 开启手机微信,点一下右上方的“法术棒”,挑选“扫一扫”作用,指向正下方二维码就可以。