码迷,mamicode.com
首页 > Web开发 > 详细

css+background实现 图片宽高自适应,拉伸裁剪不变形

时间:2018-06-20 13:03:43      阅读:5035      评论:0      收藏:0      [点我收藏+]

标签:测试   分享图片   直接   http   order   一个   style   css   TE   

 

图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性。

 


 下面咱们在网上找两张宽高不一样的照片:

          No.1                                              No.2

技术分享图片      技术分享图片

 

从上图看一个宽的一个宅的,很难做到自适应,无奈可恶的产品经理,只能自己想办法了

 请看下面图片,经在各大浏览器和手机端测试,是好用的                       


        

  咱们先来个对比:

 

    好用                                                不好用

技术分享图片技术分享图片

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

下面是代码:直接放个div就OK啦。


 

 

<div style="
  width:500px;
  height:600px;
  border: 1px solid #000000;
  background: url(http://img.zcool.cn/community/01b34f58eee017a8012049efcfaf50.jpg@1280w_1l_2o_100sh.jpg) no-repeat;
  background-size:cover;
  background-position: center center;
">
</div>
<div style="
  width:500px;
  height:600px;
  border: 1px solid #000000;
  background: url(http://img17.3lian.com/d/file/201703/07/4ceeb6fc3d7956ac7731290a603e0a84.jpg) no-repeat;
  background-size:cover;
  background-position: center center;
">
</div>

 

css+background实现 图片宽高自适应,拉伸裁剪不变形

标签:测试   分享图片   直接   http   order   一个   style   css   TE   

原文地址:https://www.cnblogs.com/xianxianxxx/p/9203058.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!