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

更新日期: 2018-05-29阅读量: 2832标签: 图片

需求如下:

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

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

html5图片上传使用FileReader预览

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

前端开发中对图片的优化技巧有哪些?

除了内容图片,其他的图片的作用是修饰,也就是对于传达信息来说并非本质性的。最大的优化就是压根不要图片!所以在优化之前要做的,首先是确认设计,设计本身是否需要用那么多图片?还是说可以更简洁?

flutter加载图片几种方式

加载本地图片:在项目根目录下创建名为 assets 的文件夹,将装有本地图片的自定义文件夹(假设取名为images)放在assets文件夹的目录下

使用 form 和 iframe 实现图片上传回显

主要利用 form 的 target 属性,在提交表单之后 response 返回到 iframe 中。form 的 action 可以自己写,也可以直接利用 富文本编辑器的接口实现上传

vue中使用带隐藏文本信息的图片、图片水印

通过RGB 分量值的小量变动,不影响对图片的识别。因此,我们可以在图片加入文字信息。最终达到如下效果:

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

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

图片该如何优化来提高网站性能?

图像是web上提供的最基本的内容类型之一。他们说一张图片胜过千言万语。但是如果你不小心的话,图片大小有时高达几十兆。因此,虽然网络图像需要清晰明快,但它们尺寸可以缩小压缩的,使用加载时间保持在可接受的水平。

提供图片服务网站

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

webp图像格式

这是支持在互联网上无损和有损图像质量压缩的新格式。谷歌公司开发这种格式专为在网上迅速和方便地做好工作。其主要优点是,相对于其他图像格式,文件小,但图像质量相似。

使用 AVIF 图片格式

众所周知,一图胜千言,图片对于视觉的冲击效果远大于文字。但对于我们的互联网而言,传输与解析一张图片的代价要远比千言大的多的多(目前上亿像素已经成为主流)。

点击更多...

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