如何让图片自适应屏幕(移动端)大小

2018年6月6日13:01:52 1 32 阅读

图片自适应屏幕,让图片自适应屏幕大小,是响应式开发必须要学会的。

最简单的方法,保证管用,你把那个图片写在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=“/image/20140724/201402508_15817.jpg” alt=””>
</div>

这里就把图片固定在msg_desc里面了,方便吧。

注:在html里面插入图片,如果想让图片自适应屏幕的小而不是宽高固定不变可以在css代码里加入

img { height: auto; width: auto\9; width:100%; }

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

下一步你要了解如何做好移动端的优化

 

hcyaobin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  0   博主  0   引用   1

    来自外部的引用: 1

    • 在html中图片自适应,浏览器和屏幕,宽度高度自适应 – 文中之舞