当前位置:首页 > 经验 > 数码摄影 > it技术

html5设置图片自适应屏幕宽度

关注:95 发布时间:2021-07-12 16:51:01

导语本文整理了html5设置图片自适应屏幕宽度经验知识,帮助您全面了解,小白也能成为高手,跟随小编一起来看一看吧!

在html网页的开发中,需要兼容不同尺寸的屏幕,让图片在不同的设备上表现出预期的效果。使用css中的背景属性可以实现自适应屏幕宽度

需要准备的物品

浏览器,文本编辑器

详细介绍方法/步骤

用下面的代码创建一个新的html文件

打开html文件所在的文件夹,双击该文件并跳转到浏览器

更改浏览器大小,发现图片没有变化,显示不完整

在文件夹中,创建一个新的样式文件,命名为auto.css,代码如下

在html文件中添加对样式文件的引用,返回文件夹,双击html文件,发现浏览器的改变会导致图片一起改变,适应屏幕大小

猜你喜欢

  • win10 1909版本通知

    win10 1909版本通知99人喜欢

    1.首先,我们点击任务栏左下角的开始标志,然后选择[设置]选项。2.在打开的窗口设置界面中,单击更新和安全。3.在打开的界面左侧选择[windows安全]选项卡,然后单击右侧的[病毒和威胁防护]选项。4.在打…

    更新时间:2022-03-03 18:53:04

  • 最新游戏鼠标十大品牌排行

    最新游戏鼠标十大品牌排行21人喜欢

    详细介绍方法/步骤明基游戏鼠标:轻巧是这款鼠标的主要特点,握感非常舒适;罗技游戏鼠标:是专门为大品牌电脑生产鼠标的厂家,是游戏鼠标的第一品牌。razer游戏鼠标:是著名的鼠标周边品牌,追求卓越游戏体验…

    更新时间:2021-10-28 12:55:05

  • 为什么有的文档没有网络不能打开

    为什么有的文档没有网络不能打开86人喜欢

    1、财富的价值不足(你应该可以肯定,关注财富不是万能的)。2.下载迅雷,快递等软件。或者使用带有内核等软件的下载工具。3.百度文库中的文章只能通过注册百度账号下载,只能通过浏览器本地下载,不能通…

    更新时间:2022-03-06 10:57:04

  • 网络电视遥控器失灵怎么办

    网络电视遥控器失灵怎么办31人喜欢

    1.遥控器的故障是由于电池长期使用,很多情况下无法正常供电造成的,只有更换电池才能解决。2.也有可能是遥控器用久了,导致电池仓的弹簧生锈。安装电池使用前,可以清除铁锈。3.也有可能是电池没电了,换…

    更新时间:2022-02-19 07:00:22

  • 小红书的视频怎么保存

    小红书的视频怎么保存58人喜欢

    1.在手机上安装小红书和微信,然后在手机上打开小红书。2.打开小红书,找到需要保存到手机的视频。3.输入视频后,点击右上角的共享图标。从选项中选择复制链接。4.复制链接后,打开微信,转到“发现”小程…

    更新时间:2021-12-24 20:47:02

  • ppt中怎样给图片加边框?

    ppt中怎样给图片加边框?74人喜欢

    需要准备的物品电脑/手机详细介绍方法/步骤首先点击电脑/手机页面上的wps演示文稿,点击中间的“云文档”,点击左边的“新建”,新建一个ppt。其次,点击新建ppt左上角的“插入”,点击工具栏中的“图片”…

    更新时间:2021-07-08 18:51:01

  • 路由器150m和300m的区别

    路由器150m和300m的区别5人喜欢

    详细介绍方法/步骤首先,我们需要知道150m是什么意思。m是传输速率的单位。数字越大,传输速度越快。理论上,网速150m,每秒传输速度18.75mb.网速300m,每秒传输速度37.5mb.但是传输过程中会有能量消耗,所…

    更新时间:2021-08-16 16:52:02

  • ipad2怎么升级系统

    ipad2怎么升级系统52人喜欢

    1.首先,打开设置,确保你的ipad有足够的电量。如果电量不够,可以插上充电器,边充电边更新。请确保您的网络稳定,因为安装ipad下载的更新包需要一些时间。请确保您的ipad有超过2.7g的空间,这是更新包的大…

    更新时间:2022-03-08 12:55:01

  • 视频logo怎么添加

    视频logo怎么添加14人喜欢

    使用edius 6.02,您可以通过以下方式为视频添加徽标:1.打开软件界面,将您自己的视频文件和徽标文件拖到素材库中。然后将视频文件拖到时间线的第二个轨道。2.然后将徽标文件拖到素材库中时间线的第…

    更新时间:2022-02-13 10:57:01

  • 怎么在notepad

    怎么在notepad46人喜欢

    我们经常用记事本写python文件,但是写完后怎么在记事本中直接执行呢?以下小系列将与大家分享。需要准备的物品笔记本详细介绍方法/步骤首先,我们打开记事本文档,在临时文档中写一个python内容,如下图…

    更新时间:2021-07-13 20:47:04

  • 如何给视频里说的话加字幕

    如何给视频里说的话加字幕77人喜欢

    1.可以用视频编辑器写下对话,自己做字幕。对话多的话,自己写字幕太麻烦了。您可以使用“音频到文本助理”将音频转换为文本,这样您就可以轻松地将对话转换为文本。可以简单易行。2.操作方法如下:首先…

    更新时间:2021-12-25 14:53:05

  • ps右边一栏常用的功能不见了

    ps右边一栏常用的功能不见了97人喜欢

    详细介绍方法/步骤打开ps,发现右侧一些常用功能缺失。为了显示它回来,我们首先点击菜单上的“窗口”在弹出的下拉菜单中,点击选择需要显示的功能项。例如,在此选择“历史”和“信息”会在右边显示这…

    更新时间:2021-06-25 15:59:04