两种方式实现图片按比例响应式缩放、并自动裁剪的css技巧

两种方式各有各的优势和短板:

一:也是大家最经常用的,如下:

<div style="width: 4.0rem;background: red;">
        <img data-echo="assets/img/bmw_m1_hood.jpg" src="assets/img/grey.gif" alt="" style="width: 100%;">
</div>

这种方式优势在于:

1,可以结合flexble等手机适配框架实现手机端的适配  (width: 4.0rem;)

2,可以结合echo.js或者lazyload.js等懒加载插件

备注:懒加载时style="width: 100%;"是必须要设置的

这种方式短板也很明显:

1,高度是自适应宽度的变化的,所以不能实现等比例裁剪,比如1:1;2:3。。。。

2,如果很多同类图片同时使用,需要美工做同样尺寸的图片

二:利用css的background:url()属性,如下:

html部分:

<div style="width: 4.0rem;background: red;">
        <div class="zsimage"></div>
   </div>

css部分:

.zsimage{
  background: url(../../../assets/img/bmw_m1_hood.jpg);
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  background-size: cover;
}

备注:设置比例时直接对 width: 100%;和padding-bottom: 100%;进行设置就好,比如目前都是100%也就是1:1

           如果设置为width: 100%;padding-bottom: 50%;就是2:1

这种方式的优势在于:

1,可以在不拉伸图片的情况下,按比例裁剪图片

2,无论什么尺寸的图,不需要美工处理,可实现自行裁剪

短板也很明显:

1,不能做懒加载处理

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值