自适应

PC电脑端、手机端HTML+CSS图片大小自适应

PC电脑端、手机端HTML+CSS图片大小自适应

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。

具体情况...

收藏 0

评论 0

本文标题: PC电脑端、手机端HTML+CSS图片大小自适应

本文链接: https://crm.yallacn.com/jiaocheng/287.html (转载时请注明来源链接)

本文说明: 有问题或投稿请发送至: 邮箱/service@zhimatong.com    QQ/1174742835

特别鸣谢: 如果您觉得本文对您有帮助,请给我们一个小小的赞,收藏本文更利于反复学习哦!

联系
顾问

交流群 购物车
账号登录

没有账号?立即注册

忘记密码

登录即同意用户协议没有账号? 立即注册
账号注册
我已阅读并同意用户协议
立即注册
注册即同意用户协议已有账号? 立即登录
找回密码

操作步骤:邮箱验证->设置新密码

注册即同意用户协议已有账号? 立即登录