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

图片平铺有两种方式，直接写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%

html图片平铺div,前端小知识——图片平铺问题相关推荐

html前端小知识：制作简单的纯文字图标按钮
今天分享下"html前端小知识:制作简单的纯文字图标按钮"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark ...
每天10个前端小知识（1day）
一.var和let的区别 1.var是函数作用域,let是块级作用域. 在函数中声明了var,整个函数内都是有效的,比如说在for循环内定义的一个var变量,实际上其在for循环以外也是可以访问的. ...
canva画图图片居中裁剪_CSS3 object-fit:cover 剪裁图片尺寸适配div - 居中并裁剪图片...
今天来分享另一种最佳最完美的居中自动剪裁图片的功能,虽然IE8无法做到,但现在IE8还需要考虑吗? 放弃吧,直接使用 object-fit: cover; ! 你还记得通过设置图片的 backgro ...
前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）
文章目录前言第一回合一.知识点:cookie(21/09/06) 二.知识点:节流和防抖(21/09/07) 三.知识点:var和let以及const(21/09/08) 四:知识点:深拷贝和浅 ...
java 微信图片上传_微信小程序图片上传java端以及前端实现
小程序的图片上传与传统的图片上传方式有一些不一样如果你有幸看到这篇文章,恭喜你,你可以完美解决了. 话不多说,前后端代码一并奉上: (基于springmvc ) @Controller @Reque ...
小白牛必定掌握的前端小知识
**第一步:**找一个图片加载为背景: <style type="text/css">body {background-image: linear-gradient(1 ...
前端面试题个人汇总(精简知识要点总结话术) / 前端小知识保持学习 (年终奖年终奖心心念念年终奖)
基础知识(学校里学过的那种) 浏览器IP寻址到到页面渲染完成的过程 1.浏览器构建请求 1.1 DNS域名解析寻找ip 浏览器缓存→系统缓存→运营商缓存→根DNS服务器 1.2 在应用层封装http ...
前端小知识：ElementPlus引入阿里图标使用（超详细-手把手教学）
文章目录 1. 下载阿里图标 2. 将下载的文件压缩放入到项目中 3. 直接本地打开压缩文件里面的使用Demo - demo_index.html 4. 根据上面的Demo提示,页面需引入文件里面的i ...
计算机的小知识图片,实用电脑小技巧：你可能不知道的图片处理小知识
沪江小编:对于很多人来说,电脑应该算是使用频率最高的工具了,可是你真的会用电脑么?实用电脑小技巧,用最简单明了的方式给你无比有趣的电脑使用新体验. 有时候,看到一张图片很漂亮,想拿来使用它, 可是发现 ...

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

html图片平铺div,前端小知识——图片平铺问题相关推荐

最新文章

热门文章