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

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

需求如下:

    前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果,等比例正方形显示在列表中,让图片根据宽高来自适应显示在页面上。那么使用纯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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

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

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

手机横屏和竖屏情况下的图片旋转

图片渲染要解决的几个主要问题:1、图片默认是水平方向,要设置图片居中2、需要旋转的情况是:图片的宽度大于高度,这样旋转后图片显示的就大些3、在旋转之前要确认好图片的大小,因为旋转后依然是以旋转前的图片的大小

HTML img src图片路径不存在,则显示一张默认图片的方法

我们一般会给图片设置 alt 属性,当图片路径不存在时可以显示提示文字。但是这样很不好看,如果用在文章列表,我们可以给 img 标签设置一个 onerror 属性,可以在 src 路径不存在时显示指定的默认图片

Js实现下载图片

服务器接口返回一个图片的远程地址,要求前端进行下载,前端接口拿到图片通过canvas转成base64的格式,然后利用A标签的download属性 进行下载,具体请看代码

前端图片压缩上传(纯js的质量压缩,非长宽压缩)

此demo为大于1M对图片进行压缩上传,若小于1M则原图上传,可以根据自己实际需求更改。demo源码如下:

使用html2canvas将页面转成图

之前在网上找到一个用 <a> 的 download属性下载的方法,确实很简单也很方便,但此方法不支持IE,无奈又找到另一方法。使用html2canvas将页面转成图,用canvas2image下载

css实现图片剪裁居中_利用css属性object-fit

列表显示图片的时候,一般设置图片宽度自适应,那么高度就会根据图片本身的宽高比等比缩放,怎么才能实现图片居中剪切,避免图片变形呢,css属性object-fit就可以实现

jpg、gif、png、svg、bmp、WebP图像格式的区别以及应用场景

jpg:非常适合作为储存像素色彩丰富的图片、例如照片等等,png:分为 png-8 以及 png-24 两种格式,gif:非常适合用来表现图标、 UI接口、线条插画、文字等部分的输出,也可用来展示小的动画。

JS实现图片放大镜功能

将一个小图放置在一个小盒子里,当鼠标在小盒子里移动时,出现一个移动块,右侧出现一个大盒子,显示出小盒子中移动块所在区域的等比例放大的图片内容。基本实现思路为:右侧大盒子为一个可视区域,有左侧小盒子中的图片的等比例放大图片,通过计算图片需要移动的距离来显示出想要放大的内容,超出部分设置为隐藏。

谈谈 Web 图片浏览体验与优化

图片,在一张网页上起到了相当大的作用。一个充满艺术的网站,它们的排版往往十分简洁、大方,整张网页的美感全体现在了一张背景图和产品图=== 而在浏览这样的网页时,其响应速度决定了用户体验。如果你正在打开一个自己比较感兴趣的网站

点击更多...

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