欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML中的图片如何自适应屏幕?这篇文章有图片的自适应用法介绍

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

本篇文章主要的介绍了关于HTML中的图片是如何自适应屏幕的,还有关于图片只适应移动端的方法和实例,最后还有背景图片的调整方法介绍。接下来让我们一起来看看吧

首先我们看看HTML中的图片是如何自适应屏幕的:

让图片自适应屏幕大小最简单的方法,保证管用,你把那个图片写在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="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt="">
</div>

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

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

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

width:auto;是宽度自动的意思。

“\9”是hack Css 的一种写法,这种在正常Css代码后面加"\9"的方式,只有IE浏览器才能识别,其他浏览器会忽略这条语句。这样就能做到差异化浏览器,来达到兼容浏览器的目的。

还有一种如何让网页图片宽度和高度自适应的方法:

在我们设计网页的时候,经常会遇到图片自适应问题,实际这些工作完全可以交给浏览器来完成就可以了,只可惜,无论是IE还是FIREFOX在图片自适应这个问题上都处理的不尽人意,网上实现网页图片宽度和高度的方法也很多。

今天介绍的这种是使用CSS来完成,根据实际的应用效果来说,使用Javascript还是比较靠谱一点,因为CSS的expression的确有点烦,小编是指使用效果上有点恼人,仅供大家参考使用。

使用CSS实现图片的自适应

使用CSS实现图片自适应很简单,主要靠两个参数来完成,分别是max-width和max-height,这两个参数在FIREFOX和IE7以 上支持都很好,但是在IE6上面,效果非常糟糕,尤其是对于多张图片的显示,第一次显示网页大都很难达到图片自适应的效果,一般都是有些能自适应,有些不 能自适应,多次刷新可能又显示OK,就是这点就足够烦人,而且一旦显示多张图片,IE 6上就卡的要命(expression在IE上比较占用资源,感觉设计是用来玩得,FIREFOX自适应效果还是比较好,速度也非常快),反正笔者至今是 没有找到更好的CSS方法来让IE 6完美支持图片自适应。

示例代码如下:

img{
    max-width: 128px;
    max-height: 128px;
    height:auto;
    zoom:expression( function(e) {
if(e.width>e.height) {if (e.width>128) { e.height = e.height*(128 /e.width); e.width=128; }}
else {if (e.height>128) { e.width = e.width*(128 /e.height); e.height=128; }}
e.style.zoom = '1';     }(this));
         overflow:hidden; 
}

上面代码格式上需要特别注意两点:

  • zoom属性里宽高赋值不能带单位(如px),否则无效;

  • if和else语句也必须带大括号括起来,单句指令也不行(而在很多编程语言里,单句指令可以无需大括号);

最后一个种放置背景图片的方法:

首先看你的背景图片大小,如果很大的话,一般情况下很多显示器都会显示的合适。

如果是想适应移动设备的,用一个CSS3属性

background-size:cover;

就可以了,可以将背景图根据窗口大小铺满整个浏览器窗口。

好了,以上就是这篇关于HTML中的图片自适应的三个常用的应用方法了,有问题的可以在下方提问。

【小编推荐】

HTML5 meter标签什么意思?meter标签的用法详解

Html表单中textarea属性怎么固定大小?textarea属性实例介绍 本文地址:http://itbyc.com/web/html5/20772.html
转载请注明出处。

分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1