分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

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

发布时间:2023-09-06 02:00责任编辑:沈小雨关键词:自适应

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


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

          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实现 图片宽高自适应,拉伸裁剪不变形

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved