search
HomeWeb Front-endHTML TutorialHow do images in HTML adapt to the screen? This article has an introduction to the adaptive usage of images.

本篇文章主要的介绍了关于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 src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg"  class="lazy"    style="max-width:90%"  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 = &#39;1&#39;;     }(this));
         overflow:hidden; 
}

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

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

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

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

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

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

background-size:cover;

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

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

【小编推荐】

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

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

The above is the detailed content of How do images in HTML adapt to the screen? This article has an introduction to the adaptive usage of images.. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
img文件怎么打开img文件怎么打开Sep 18, 2023 am 09:40 AM

打开img文件的方法有使用虚拟光驱软件打开、使用压缩软件打开和使用专用工具打开。详细介绍:1、使用虚拟光驱软件打开,下载并安装一个虚拟光驱软件,右键单击img文件,选择“打开方式”或“关联程序”,在弹出的对话框中选择安装的虚拟光驱软件,虚拟光驱软件会自动加载img文件,并将其作为虚拟光驱中的光盘映像,双击虚拟光驱中的光盘图标,即可打开img文件并访问其中的内容等等。

HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML(超文本标记语言),介绍一下HTML的本质,HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单,希望对大家有所帮助!

img文件如何打开img文件如何打开Jul 06, 2023 pm 04:17 PM

img文件打开的方式:1、确认img文件路径;2、使用img文件打开器;3、选择打开方式;4、查看图片;5、保存图片。img文件是一种常用的图像文件格式,通常用于存储图片数据。

img是什么格式img是什么格式Mar 17, 2023 am 10:33 AM

img是一种文件压缩格式,主要是为了创建软盘的镜像文件,它可以用来压缩整个软盘或整片光盘的内容;使用“.IMG”这个扩展名的文件就是利用这种文件格式来创建的;img文件包括3个基本节点,分别是“Ehfa_HeaderTag”、“Ehfa_File”和“Ehfa_Entry”。

web前端笔试题库之HTML篇web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

总结HTML中a标签的使用方法及跳转方式总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式,希望对大家有所帮助!

u盘pe读不出imgu盘pe读不出imgMar 19, 2024 pm 12:07 PM

U盘是经常用到的储存设备之一,那在使用过程中也会出现一些小问题,比如:U盘读不出,那该怎么解决呢?收好!u盘读不出来?4步教你轻松解决在U盘已经插到电脑的基础上点击开始菜单,选中控制面板收好!u盘读不出来?4步教你轻松解决在控制面板里找到并双击设备管理器。收好!u盘读不出来?4步教你轻松解决在设备管理器的主界面找到通用串行总线控制器收好!u盘读不出来?4步教你轻松解决找到usb大容量存储设备,选中它点击右键找到卸载收好!u盘读不出来?4步教你轻松解决欢迎留言讨论哟!

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Atom editor mac version download

Atom editor mac version download

The most popular open source editor