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

PHP中文网 JavaScript 百度已收录

当前第2页 返回上一页

示例代码如下：

1

2

3

4

5

6

7

8

9

10

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属性

1

background-size:cover;

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

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

【小编推荐】

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

html表单中textarea属性怎么固定大小？textarea属性实例介绍

以上就是HTML中的图片如何自适应屏幕？这篇文章有图片的自适应用法介绍的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

认识html5的websocket

input表单如何制作多行文本输入框？一篇文章教你学会使用input标签

html怎么添加边框

html中滚动条的代码是什么？如何设置html滚动条？

怎么用html设置一个定时器

html中定义多个class属性无效

html表单的属性

html的<select> 标签

xml和html分别是什么类型的文件

html的<thead>标签

更多相关阅读请进入《img》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...