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中的图片如何自适应屏幕？这篇文章有图片的自适应用法介绍的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

html怎么设置超链接颜色

html中的短语标签是什么？有哪些？

html文本框怎么设置大小

js实现加载时锁定html页面元素的方法

使用html+css制作一些动画提示工具

html怎么让图片居中

如何区分html和xhtml？html和xhtml的区别在哪？

html怎么实现滚动文字效果

怎么在html中实现图片超链接

herf在html中怎么跳转

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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