PC电脑端、手机端HTML+CSS图片大小自适应
不管容器有多大,只要将img的宽高设置成100%(这里的100%是相对于父级宽高而言)就能自适应容器大小。
那是不是就这这么简单完事儿了呢?如果你不介意图片被放大后可能出现失真的话也的确是这样就ok了。
假如你介意 图片放大后会失真,我们可以改进上面的代码,只需要将img的样式简单修改.
img{max-width:100%;max-height:100%;}
max-width:100%和width:100%的区别在于,max-width是相对于img自身的尺寸而言的。意思是图片最大宽度为自身尺寸的宽,在这里就是100px。而width的100%我们上面已经说过了是相对于父级宽度的,所以为了不让图片被放大后失真我们可以设置img的最大宽度为自身尺寸大小,更通俗的讲就是只允许缩小不允许放大img。
具体情况...
本文标题: PC电脑端、手机端HTML+CSS图片大小自适应
本文链接: https://crm.yallacn.com/jiaocheng/287.html (转载时请注明来源链接)
本文说明: 有问题或投稿请发送至: 邮箱/service@zhimatong.com QQ/1174742835
特别鸣谢: 如果您觉得本文对您有帮助,请给我们一个小小的赞,收藏本文更利于反复学习哦!
热门主题
相关阅读
- 使用jQuery实现同级元素class切换
- 苹果手机iOS设备,浏览器在 textarea 或 input 中输入文字时页面放大的解决办法
- select选择后直接跳转到其他网站的三种方式
- 详解CSS居中对齐的3种方式15个样例
- Echarts图表基本参数设置说明
- jQuery报错$(this).attr(‘checked‘)undefined/checkbox无法改变其状态的解决方法
- jq .html() 特效无效的解决办法
- 如何将iconfont中的字体图标全部展示在页面中
- HTML特殊字符符号大全
- jQuery清空input的值,清除标签内容的方法
- jQuery 获取相同 class元素的最后一个元素或id
- ajax传递data的三种传递方式



交流群
购物车