css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果

时间: 2018-05-29阅读: 1915标签: 图片

需求如下:

    前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果,等比例正方形显示在列表中,让图片根据宽高来自适应显示在页面上。那么使用纯css该如何实现不定宽高的图片居中裁剪呢?


mate标签:

<meta name="viewport" content="width=device-width,user-scalable=no,target-densitydpi=device-dpi" />


css代码

<style type="text/css">  
    .figure-list{  
      margin: 0;  
      padding: 0;  
    }  
    .figure-list:after{  
      content: "";  
      display: block;  
      clear: both;  
      height: 0;  
      overflow: hidden;  
      visibility: hidden;  
    }  
    .figure-list li{  
      list-style: none;  
      float: left;  
      width: 23.5%;  
      margin: 0 2% 2% 0;  
    }  
    .figure-list figure{  
        border: 1px solid #000;  
      position: relative;  
      width: 100%;  
      height: 0;  
      overflow: hidden;  
      margin: 0;  
      padding-bottom: 100%; /* 关键就在这里 */  
      background-position: center;  
      background-repeat: no-repeat;  
      background-size: cover;  
    }  
    .figure-list figure a{  
      display: block;  
      position: absolute;  
      width: 100%;  
      top: 0;  
      bottom: 0;  
    }  
</style>


html代码

<ul class="figure-list">  
  <li>  
    <figure style="background-image:url(src/fly63前端网.jpg)">  
      <a href="#"></a>  
    </figure>  
  </li>  
  <li>  
    <figure style="background-image:url(src/fly63前端.jpg)">  
      <a href="#"></a>  
    </figure>  
  </li>  
   <li>  
    <figure style="background-image:url(src/fly63前.png)">  
      <a href="#"></a>  
    </figure>  
  </li>  
  <li>  
    <figure style="background-image:url(src/fly63.jpg)">  
      <a href="#"></a>  
    </figure>  
  </li>  
  
   <li>  
    <figure style="background-image:url(src/fly6.jpg)">  
      <a href="#"></a>  
    </figure>  
  </li>  
  <li>  
    <figure style="background-image:url(src/fly.jpg)">  
      <a href="#"></a>  
    </figure>  
  </li>  
</ul>


完结~~~~~~~~~

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/837

关闭

图片下载的几种实现

通过浏览器自动下载。浏览器接收到二进制文件,自动转码下载。比如:window.open()通过xhr下载。ajax请求得到的是二进制文件,只能手动转码下载。

html2canvas 生成的图片变模糊解决方案

背景图片和二维码还有用户微信头像生成一张图片,可供用户下载。打开页面的时候就是一张图可以保存,html2canvas插件即可实现效果,效果是实现了,但是很郁闷,图片模糊了。。。。

js实现图片局部放大效果

图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积。

100多行代码实现js或者jquery版的类似juejin的预览图片功能

预览图片是一个很常用的业务功能,比如掘金的预览图片功能,下面我们就来模拟实现一个类似掘金的简单预览图片功能(PS:最终实现动画效果不如掘金,可自行扩展,还有就是嵌套的元素与掘金的方式也有区别)。

css怎么设置图片平铺方式?

background-repeat属性是用来设置背景图像如何平铺的。默认地,背景图像在水平和垂直方向上重复,背景图像的位置是根据 background-position 属性设置的

js上传图片,利用canvas实现图片压缩

最近项目中的一个基础功能-----手机上传图片:1、利用canvas进行压缩(这个应该都比较熟悉)2、利用exif-js获取照片旋转角度属性,因为有些手机机型会因为拍照时手机的方向使拍的照片带一个旋转角度的属性

前端获取图片exif信息

对又是我,每天都有新的需求。这次的需求是上传图片的时获取图片的宽高、设备、光圈等信息。pc、android、ios 都支持了,现在就缺少 web 这边上传的图片了。

h5本地预览上传的图片或视频

通过<input id=input type=file onchange=changeFile()> 中的change事件 拿到的file不能直接在本地预览选择的图片或者视频,可以通过以下两种方式预览本地图片,不用上传到服务器就可以本地预览。

html2canvas保存图片模糊问题解决

使用官网的CDN,网上可以查到很多解决方案,常用的主要就是:canvas先放大,其次加个dpi效果也可以,代码如下:

解码 PNG 图片

解码 PNG 图片就是把一张图片从二进制数据转成包含像素数据的 ImageData 。图片的二进制数据可以从 <canvas> , <img> ,Object URLs,Image URLs, Blob 对象上获取到。参见浏览器图像转换手册。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!