css背景图片自适应属性整理,css背景设置图

大家好，下面小编给大家分享一下，css背景图自适应属性整理，css背景设置图，很多人还不知道。下面详细解释一下。现在让我们来看看！

该方法适用于图片大小不同，需要根据页面大小实现自适应比例缩放的情况；

之前是用背景图来达到这个效果。这种方式的一个缺点就是不利于SEO优化，所以我决定换一种方式来写。我综合了网上找到的文章，写了这篇教程，供初学者学习使用。

实现风格:

演示1

代码优先:

HTML结构

& ltdiv class = wide & gt

<div class=img-wrap> & ltdiv class = img-wrap & gt；

& ltdiv & gt

<img src=./test_img.jpg /> & ltimg src=。/test _ img . jpg/& gt；

& lt/div & gt；

& lt/div & gt；

& lt货物名称。商品名称

& lt/div & gt；

CSS样式

。宽{

宽度:60%；

高度:自动；

边距:0自动；

边框:1px实心# f2f2f2

}

。宽。商品名称{

宽度:100%；

高度:28px

字体大小:14px

填充:0 10px

框大小:边框-框；

背景色:# fff

}

.img-wrap { /*重点从这里开始*/ 。img-wrap {/*重点从这里开始*/

宽度:100%；

高度:0；

垫底:60%；

溢出:隐藏；

位置:相对；

背景色:浅灰色；

}

.img-wrap > div { 。img-wrap & gt；部门{

宽度:100%；

身高:100%；

位置:绝对；

显示器:flex

对齐-项目:居中；

justify-content:居中；

}

.img-wrap > div img { 。img-wrap & gt；部门图像{

宽度:自动；

高度:自动；

最大宽度:100%；

最大高度:100%；

}

简要描述:

1、.img-wrap 的 padding百分比值是相对于宽度的，这样我们就可以按照图片的比例来设置高度啦！height=0,padding-bottom=100% 正好是一个正方形（这里设置为60%）；设置相对定位是为了 能够使子元素 基于它设置宽高（这样padding的值会计算在内，不然子元素的高度设置百分比时只会是我们写的‘height: 0’）;1.的填充百分比值。img-wrap是相对于宽度来说的，这样我们就可以根据图片的比例来设置高度了！Height=0，padding-bottom=100%正好是正方形(此处设为60%)；设置相对定位，使子元素可以基于它设置宽度和高度(这样就会计算填充值，否则子元素的高度只会设置为我们写的‘height:0’)；

2.图像宽度和高度{ width:auto；高度:自动；最大宽度:100%；最大高度:100%；}以便图片可以根据父元素的宽高比自适应显示；

3.此时画面自适应，以下为中心；

4.居中有很多种方式；我这里用的是flex布局，很容易实现。如果我想兼容IE和多版本浏览器，请使用其他居中方式。

补充:设置图片时，可以将宽度和高度设置为100%，然后利用CSS的新属性object-fit实现图片的比例自适应居中显示。

以上解释了css背景图片的自适应属性排列，css背景设置图片在此分享。希望能帮到大家。如果信息有误，请联系边肖进行更正。

标签： css背景图片 背景图片自适应 css背景设置 图片自适应属性