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

作者 : MOOMOO 本文共539个字,预计阅读时间需要2分钟 发布时间: 2022-04-25 共19人阅读

不管容器有多大,只要将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。

具体情况中是选择width:100%还是max-width:100%还是依据个人的需求而定,另外在响应式设计中这个问题稍微会复杂一点。

 

图片适应手机端  要控制的是装图片的容器宽度

img{
display: block;(可不加 banner可以用)
height: auto;
max-width: 100%;(或者width:100%)
}
将以上标签加入之后保存,再用手机打开即是自适应网页了。

1. 本站所有资源来源于用户上传和网络,仅作为演示数据,如有侵权请邮件联系站长!
2. 本站客服QQ:4387159,唯一购买官网:MooMoo.TOP!
3. 盗版,破解有损他人权益和违法作为,请各位会员支持正版!
MooMoo » PC电脑端、手机端HTML+CSS图片大小自适应

常见问题FAQ

是否支持共享资源赚外快?
本站支持任何人上传资源,一经采用即可展示,客户下单既有80%的提成。
可以免费教技术吗?
大家可以加群进行探讨共同进步,重点问题管理员会进行解答。
我是小白要怎么学习?
加群后做到不耻下问,看文章学习演示就能成为大佬。

发表评论