html自动裁剪图片宽度,html中如何让图片按比例响应式缩放、并自动裁剪的css技巧...
响应式网站、移动端页面在DIV CSS布局中对于图片列表或图片排版时,如果想要图片按比例缩放,最简单的就是把img宽度设为100%,不设置高度,高度就会自动跟着高度缩放。
但是如果要达到的效果是,要让图片的宽高要按一定的比例显示,如1:1 、4:3 等,然而图片尺寸不是这个比例,又不想让图片拉伸变形,自动裁剪掉两边多余部分、这该如何解决呢?
首先,今天准备了四张宽高各不相同的素材,如下图所示:
先展示一下最终效果:
(注意这里的裁剪是以中间为基点,裁剪的是上下或左右两边)
(宽高1:1):
(宽高4:3):
(宽高3:4):
实现样式
html部分:
css部分:.zoomImage{
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%;
height:0;
padding-bottom: 100%;
overflow:hidden;
样式中的上面四句主要目的是为了让这个div以1:1的大小呈现,
虽然height:0;高度为0,但是它的padding值为100%
这是因为在padding为百分比的时候,是根据他父层的宽度来进行计算的。
在一点MDN关于padding的文档 也有说到,有兴趣的同学可以看看。background-position: center center;
background-repeat: no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
后面5句就是利用了css3中的 background-size:cover 的特性,把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
对于padding为百分比的时候,我画了一张图,希望有助于大家理解:
总结:就是你所需要的比例,就是width与padding-bottom的比例;用的时候,直接把.zoomImage当成img标签来用就可以了。
关于扩展到响应式轮播:
在这里我拿swiper轮播图插件举例:
这个插件是目前应用较广泛的移动端网页触摸内容滑动js插件……
这个插件本来就是响应式的没错,
但有两个问题:
1、这个轮播图你必须要给他一个高度,但高度不是固定死的,是需要按比例的,
(除了用js,或者每个分辨率用媒体查询设置一下高度/这个简直不要太繁琐)
所以我们还可以用刚刚上面的padding方法,让它成为一个可以按比例缩放的容器
2、轮播图里的图片不是需要的比例怎么办(又回到这个问题上来了,现在知道该怎么做了吧)
优化前:
优化后:
就可以变成一个:不用根据图片尺寸,都可以根据比例自适应的轮播图啦。
关于兼容性:
这个样式里有利用到CSS3的属性: background-size:cover;
那当我们做响应式、移动端的页面时,肯定也要用到CSS3的媒体查询或者其他的CSS3样式,而且移动端的浏览器对CSS3的支持性比较好,所以这一点应该是不用担心的。
html自动裁剪图片宽度,html中如何让图片按比例响应式缩放、并自动裁剪的css技巧...相关推荐
- 如何让图片按比例响应式缩放、并自动裁剪的css技巧
如何让图片按比例响应式缩放.并自动裁剪的css技巧 同时也适用于一些轮播父容器响应式缩放 响应式网站.移动端页面在DIV CSS布局中对于图片列表或图片排版时, 如果想要图片按比例缩放, 最简单的就是 ...
- 发卡源码php免签约,2021亲测响应式PHP个人自动发卡源码-AZ发卡网源码 对接免签约易支付...
2021亲测响应式PHP个人自动发卡源码-AZ发卡网源码 对接免签约易支付 个人自动发开网源码在聚码屋以及分享过许多套,今天这套在诸多发卡系统中,个人感觉是不"如意"的,至少我不是 ...
- 如何在html中添加图片的自动滚播,制作网页中的滚动图片,怎样循环播放。
制作网页中的滚动图片,怎样循环播放.0 zhang7_112016.03.23浏览479次分享举报 怎样循环播放;> <.scrollLeft插入需要滚动的图片"/,spe ...
- 【Unity教程】如何动态更换精灵图片在图集中更换精灵图片
参考文章:1.unity3d 更换sprite renderer中sprite的图片 2.制作精灵(UI Sprite) 3.Unity2D动态设置SpriteRender的Sprite(Multip ...
- java怎么将加载图片消除_Java中加载图片的方法
Java中添加图片,我知道有两种方法 用new ImageIcon("地址")函数,将图片放到JLabel中,然后把JLabel放到需要的地方就可以了 ImageIcon bg=n ...
- java web工程中如何添加图片_java web中如何添加图片
java web中如何添加图片 对于java可视化界面插入背景图片只需要background-image:url(图片路径)就行,而对于web项目中,并非如此 效果如下: 我们就需要在jsp页面中写J ...
- element表格里面放图片_elementUI 表格中预览图片
表格中有一列显示的图片,现需要点击图片,预览该图片,使用的elementui中的previewSrcList做的图片预览, 但是测试发现,无论点击表格中的那张图片,预览的大图都是从第一张图片,开始预览 ...
- java实现本地图片转urljava中映射本地图片地址为url访问
1.编写一个工具类PhotoUtils实现WebMvcConfigurer,然后重写addResourceHandlers方法即可 @Component public class PhotoUtils ...
- android中图片圆角,Android中实现圆角图片的几种方法
Android中实现圆角图片有多种姿势,不知你解锁了几种? 方法一:setXfermode法 此种方式就是再new一个相同尺寸的bitmap,然后使用paint.setXfermode(new Por ...
最新文章
- python怎么编辑图片_python读取图片并修改格式与大小的方法
- centos MySQL 双机_CentOS利用Keepalived构建双主MySQL+双机热备
- FastDfs上传图片时报错configparser.NoOptionError: No option ‘connect_timeout‘ in section: ‘__config__‘
- 数据可视化 -- Python
- 面试题之Java内存区域
- php根据ip获取地区的程序代码
- 计算机二级操作题微盘,全国计算机等级考试题及答案二.pdf
- EDI 电子数据交换(Electronic data interchange,缩写EDI)
- 运用EXCEL来解线性规划问题
- tomcat部署,js中文乱码
- 网页文件是用HTML语言编写的,用HTML语言制作简单的网页
- ppt编写一个抽奖系统_人人都能写的基于PPT的抽奖程序 篇三:为2019年制作一个优雅且功能全面的年会抽奖PPT...
- python什么意思g_python字符串%%g的格式是什么?
- 【03项目立项管理】【背诵版】
- chrome浏览器google搜索结果打不开
- 尚硅谷【韩顺平】 | Java数据结构和算法【详细笔记】(持续更新)
- 多种方式实现字幕滚动效果
- 如何将pdf转换成ppt文件
- 电子合同渐成主流,君子签以区块链技术打造合同签约新生态
- 7-16 约分最简分式