关闭

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

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

需求如下:

    前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果,等比例正方形显示在列表中,让图片根据宽高来自适应显示在页面上。那么使用纯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

关闭

提供图片服务网站

有了这些图片API,可以获取随机图片,很适合做Blogs背景图片,Unsplash,Pixabay,Bing每日图片,img.xjh.me

vue引入图片

通过在vue文件引入scss样式文件;如果scss文件有引入背景图片,这里不能使用相对路径了,需要使用~开头的方式,如果 URL 以 ~ 开头,其后的任何内容都会作为一个模块请求被解析。

原生Js对文件类型的判断,判断文件是图片,视频等格式

在我们开发中,会遇到这样的场景:1.服务器返回Json数据,根据数据类型来显示是图片还是视频。2.前端上传文件,需要指定文件类型才能上传到服务器。这时候就需要使用Js来判断对应文件的类型

html5图片上传使用FileReader预览

通过FileReader,和es6的方法解构赋值,promise对象简单封装上传预览,具体逻辑:选中图片之后,触发onchange方法,获得上传文件对象,调用fileReader方法验证图片是否符合上传需求,符合返回图片文本,不符合返回错误信息。

nodejs如何下载图片?

nodejs可以使用request依赖包来下载图片。需要先安装request依赖,然后使用request向网页发出请求,最后将图片下载到本地。request模块让http请求变的更加简单。(作为客户端,去请求、抓取另一个网站的信息)

html如何把图片大小变小?

我们在布局图片列表时,通常我们要控制图片的高度和宽度这样来达到图片统一。我们在HTML布局时候直接在图片img标签加宽度和高度属性即可控制图片高和宽。

微信小程序动态设置图片大小

image有默认的固定的宽度和高度,这样我们在做图片自适应的时候,就不好做了,特别是我们在做一些商品详情页的时候,需要image自适应屏幕,按原图比例显示。那么如何让image自适应比例显示呢?

图片上传获取宽高的方法

最近,我负责的后台系统有一个图片上传校验图片比例的需求,以前没有做过这种需求,便查了一些资料总结了一下图片上传获取宽高的方法。想要获取图片的宽高首先要知道图片的url

css多个img标签存在间隙的解决方法总汇

在网上整理了一些解决多个img标签存在间隙的方法:多个img标签写在一行、将要闭合标签的地方与开始标签的地方重合、在img标签的父级上写:font-size:0;这个在解决display:inline-block出现的问题也有帮助、使用display:block(img是内联元素)要float一下才行

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

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

点击更多...

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