快捷导航
鸿蒙互联网 index 新闻频道 查看内容

鸿蒙互联网 | CSS让图片自适应屏幕大小

2019-10-20 22:23| 发布者: byzps| 查看: 20| 评论: 0|原作者: byzps

摘要: 最简单的方法,保证管用,你把那个图片写在div里面的背景里,也就是 background:url(../img/1.jpg) center no-repeat; 这样就能够自适应屏幕大小了,而且不会出现横向的滚动条 首先是设置background:url(图片地址) 0 ...
最简单的方法,保证管用,你把那个图片写在div里面的背景里,也就是

background:url(../img/1.jpg) center no-repeat;

这样就能够自适应屏幕大小了,而且不会出现横向的滚动条

首先是设置background:url(图片地址) 0 0 no-repeat scroll transparent;background-size:100% 100%;

<div class="msg_desc">
<img style="max-width:100%;overflow:hidden;" src="http://www.tao3w.com/upload/kindeditor/image/20140724/20140724172508_15817.jpg" alt="">
</div>
这里就把图片固定在msg_desc里面了,方便吧。


注:在html里面插入图片,如果想让图片自适应屏幕的小而不是宽高固定不变可以在css代码里加入
img { height: auto; width: auto\9; width:100%; }


width:auto;是宽度自动的意思。
\9是hack css 的一种写法,这种在正常css代码后面加"\9"的方式,只有IE浏览器才能识别,其他浏览器会忽略这条语句。这样就能做到差异化浏览器,来达到兼容浏览器的目的。



鲜花

握手

雷人

路过

鸡蛋

最新评论

相关分类

让创业更简单

  • 反馈建议:byzps@qq.com
  • 客服电话:15573841933
  • 工作时间:周一到周五

云服务支持

精彩文章,快速检索

关注我们

Copyright 鸿蒙 - 期待你的加入~  技术支持:©  子维工作室    ( 渝ICP备19008507号 )