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

HTML网页的开发中,需要对大小不一的屏幕兼容,使图片在不同的设备中可以展示预期的效果。自适应屏幕的宽度,利用css中background属性可以实现

操作方法

  • 01

    新建一个HTML文件,代码如下图

  • 02

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

  • 03

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

  • 04

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

  • 05

    在HTML文件中加上对样式文件的引用,返回文件夹,双击HTML文件,发现浏览器的变化会引着图片一起变化,自适应屏幕的大小

(0)

相关推荐

  • css如何设置图片大小自适应

    在前端的页面设计的时候经常要用到图片,有的时候不知道屏幕的宽度,要自己适应屏幕的宽度,这样减少了出现不适应的浏览器的兼容问题那么怎么来处理图片大小自适应的问题呢 ? 操作方法 01 首先用dw编辑器建 ...

  • 移动页面自适应手机屏幕宽度

    网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设 ...

  • css如何根据屏幕宽度设置div高度

    css如何根据屏幕宽度设置div高度 操作方法 01 首先创建或者打开我们的web项目,新建一个html文件和css文件即可,如图所示 02 html页面代码如图所示,定义一个div,然后给一个id属 ...

  • 怎么给Win10电脑设置图片屏幕保护

    今天给大家介绍一下怎么给Win10电脑设置图片屏幕保护的具体操作步骤.1. 打开电脑,进入桌面,在空白处,右键,在打开的菜单中,选择"个性化"选项2. 进入个性化设置页面后,点击左 ...

  • win10电脑桌面的背景图片如何设置铺满屏幕

    我们在给win10电脑设置了背景图片后,发现图片没有铺满整个屏幕,是怎么回事呢?今天就跟大家介绍一下win10电脑桌面的背景图片如何设置铺满屏幕的具体操作步骤.1. 如图,打开电脑,可以看到设置的图片 ...

  • win10系统如何设置锁屏图片、屏幕保护程序以及睡眠功能

    现在大部分电脑都是win10系统,有些新用户不知道如何设置锁屏图片.屏幕保护程序以及睡眠功能,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先右键单击底部任务栏,接着在弹出的菜单 ...

  • 如何让页面自适应屏幕

    随着科技的进步,互联网设备已经不再局限于电脑,而出现了平板,手机,手表等产品.作为一个前端,在制作页面的时候必须要考虑到页面适应屏幕的问题.这篇和大家分享我平常工作中是怎么处理让页面自适应屏幕的. 如 ...

  • Word 2007设置图片尺寸的方法步骤

    在Word 2007文档中,用户可以通过多种方式设置图片尺寸。例如拖动Word 2007图片控制手柄、指定图片宽度和高度数值等,下面介绍最常用的三种方式。 1.拖动Word 2007图片控制手柄 用户 ...

  • Word 2007技巧:设置图片尺寸

    在Word 2007文档中,用户可以通过多种方式设置图片尺寸。例如拖动Word 2007图片控制手柄、指定图片宽度和高度数值等,下面介绍最常用的三种方式。 1.拖动Word 2007图片控制手柄 用户 ...