html图片平铺div,前端小知识——图片平铺问题

2023-11-19

图片平铺有两种方式,直接写img标签或者通过background-image方式

1,img标签

HTML:

CSS:

.row{

margin:0,auto;

width:100%;

}

img{

width:100%;

height:100%;

margin: 0 auto;

display: block;

font-size: 0;

}

这样写的话,三张图片能够垂直平铺,且随着浏览器的缩放而缩放,可以添加alt关于图片的描述,利于SEO,且写法方便,不用考虑兼容性

2,background-image方式

HTML:

CSS:

.layout{

position: relative;

max-width: 640px;

min-width: 320px;

margin: 0 auto;

}

.header{

background-size: cover;

background-image: url("img/header@2x.png");

padding-top: 11.875%;

}

在上面样式中,layout表示居中,最大宽度为640px,最小为320px,常用在手机端,

在header中设置padding-top: 11.875%;表示的是图片的高度和宽度比例

工作中遇到的问题

1,当设置一张图片向上移动且想覆盖上一张图片一部分,那么要绝对定位一下,且使用top,或者bottom的时候,虽然图片能上移下移但是上移后底部的空间还是要占据,这时候要使用margin-top:-n%;使用百分比是相对外层有定位的元素,而且能够随着浏览器缩放大概位置不变。

2,活动页面背景图宽度写死的方法

最外层div设置最大宽度和最小宽度,居中,且写背景色,或者在body写背景色,第二层div设置背景图,居中,最大宽度定死

HTML:

CSS:

body{

padding: 0;

margin: 0;

}

.bg{

margin: 0 auto;

max-width: 320px;

}

.img{

background-position: center;

height: 210px;

background: url("body-bg@2x.png");

background-size: 100% 100%;

}

3,在写手机端页面的时候有事设计稿高度不够,此时为了自适应满屏,需要在HTML和body中设置高度100%

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html图片平铺div,前端小知识——图片平铺问题 的相关文章

  • SAM 模型真的是强悍到可以“分割一切”了吗?

    关注公众号 发现CV技术之美 上周 Meta AI发布了 Segment Anything Model SAM 第一个图像分割基础模型 很多计算机视觉从业者惊呼 这下CV真的不存在了 快跑 但是SAM 模型真的是强悍到可以 分割一切 了吗
  • c++基础十三(二维数组)

    二维数组 1 定义 2 初始化 3 赋值和输出 4 二维数组名 理解 二维数组是一维数组的一种延伸 假如将一维数组比喻成一条由点构成的线 而二维就是由点构成的面 1 定义 数据类型 数组名 行数 列数 例 int arr 2 4 表示 1
  • bcnf分解算法_BCNF的保持无损连接的分解

    BCNF 的分解是数据库范式的内容 分解的算法是这样的 将关系模式R分解为一个BCNF的基本步骤是 1 检查R中关系模式是否符合BCNF 若都符合输出即可 2 若R中有关系模式S不符合BCNF 则必有X gt A的闭包不包含S的全部属性 把
  • 挑战IT达人35岁身体健康和工作效率焦虑(中年危机):生理年龄并非决定因素,行为习惯才是关键!

    文章目录 引言 1 生理年龄 vs 实际年龄 2 体能下滑的真相 3 新陈代谢变慢与体重增加 4 坐姿引发的健康问题 5 生活方式塑造健康 结论 作者问与答 你现在身体的体能状况如何 你有身体焦虑吗 如何保持规律性运动 你有哪些健康生活的好
  • 【授权mysql某一个用户只读权限以及回滚】

    GRANT SELECT ON FPSSATURN TO dbmonopr02 GRANT SELECT ON 数据库名 TO 用户名 注意 中间有 单引号 你提供的SQL查询是在数据库FPSSATURN中的所有表上授予用户 dbmonop
  • struts property escape 输出 html 标签

    有时 在数据取出一大段文字要输出到页面上 如果有回车符号 在页面会显示不出来 要显示要用到escape参数 escape false
  • Qt边框border概述

    border概述 每个边框有3个方面 样式 或外观 颜色 以及其宽度 粗细 下面我们分别重点解释这三项 边框样式 border style 设置元素所有边框的样式 或者单独地为各边设置边框样式 它有10个属性值 分别是 none 无样式 h
  • 程序员必备:一款知识管理利器+效率工具

    回复 1024 送你一个特别推送 今天给大家推荐一款知识管理利器 其实也是一个不错的效率工具 我自己感觉确实很方便 也不错 所以才推荐给大家的 我比较喜欢这款工具的亮点是 它可以把我们自己记得笔记自动生成思维导图 这款工具是什么呢 它就叫
  • 无监督和有监督算法的区别

    无监督和有监督的理解方法有很多 主要可以从以下几方面来理解 1 无监督与监督学习的区别在于一个无教学值 一个有教学值 但是 个人认为他们的区别在于无监督学习一般是采用聚簇等算法来分类不同样本 而监督学习一般是利用教学值与实际输出值产生的误差
  • 机器学习——贝叶斯网络

    贝叶斯网络 贝叶斯网络 Bayesian Networks 也被称为信念网络 Belif Networks 或者因果网络 Causal Networks 是描述数据变量之间依赖关系的一种图形模式 是一种用来进行推理的模型 贝叶斯网络为人们提
  • JavaScript对象——数学对象

    说到JavaScript对象首先需要说一下内置对象 1 内置对象 内置对象 就是js语言自带的一些对象 这些对象供开发者使用 并提供了一些常用的或是最基本而必要的功能 属性或者方法 内置对象的优点 就是帮助开发者更快的进行开发 2 数学对象
  • 数字信号处理第五次试验:FIR数字滤波器设计与软件实现

    数字信号处理第五次试验 FIR数字滤波器设计与软件实现 前言 一 实验目的 二 实验原理与方法 三 实验环境 四 实验内容及步骤 五 实验结果截图 含分析 六 思考题 前言 为了帮助同学们完成痛苦的实验课程设计 本作者将其作出的实验结果及代
  • win10安装mujoco200,mujoco_py2.0.2.9,gym

    win10安装mujoco200 mujoco py2 0 2 9 gym 最近在学习强化学习 要用到这几个组件和引擎 尝试了很多方法才成功 于是写了两篇win10系统下安装mujoco和gym的总结 本文介绍的是在Win10系统下安装gy
  • 合并两个有序链表

    编程题 合并两个有序链表 保持链表顺序 例如 输入 链表1 1 gt 3 gt 5 gt 7 链表2 2 gt 4 gt 6 gt 8 输出 链表交集 1 gt 2 gt 3 gt 4 gt 5 gt 6 gt 7 gt 8 public
  • 图解RGB565、RGB555、RGB16、RGB24、RGB32、ARGB32等格式的区别

    音视频实践学习 android全平台编译ffmpeg以及x264与fdk aac实践 ubuntu下使用nginx和nginx rtmp module配置直播推流服务器 android全平台编译ffmpeg合并为单个库实践 android
  • 移植5- uboot之tftp启动kernel

    1 在主机上安装tftp server 2 在uboot中使用setenv设置serverip和ipaddr 并保存saveenv tftp mem addr kernel name 2016 7 16 ok210kernel地址是多少 o
  • 二)PyTorch入门基础串讲(二)

    10 PyTorch与线性代数 范数 在泛函分析中 它定义在赋范线性空间中 并满足一定的条件 即 非负性 齐次性 三角不等式 常被用来度量某个向量空间 或矩阵 中的每个向量的长度或大小 零范数 1范数 2范数 欧氏距离 p范数 核范数 to
  • Hive练习题

    文章目录 Hive练习题 题目一 题目二 题目三 Hive练习题 题目一 学生表 STUDENT 的字段含义 SNO 代表学号 SNAME 代表学生姓名 SAGE 代表学生年龄 SSEX 代表学生性别 课程表 COURSE 的字段含义 CN
  • 4Sum

    Given an array S of n integers are there elements a b c and d in S such that a b c d target Find all unique quadruplets

随机推荐