css图片的自适应排版

不知道大家有没有在做多个图片排布的时候感觉会有些吃力，尤其是那些图片的长宽都是不规范的时候，直接填充图片容易拉伸，定宽或者定高，最后都会有些超出边界，下面就是我总结的解决方法。

方法一：css的background属性来设置背景图

知识点总结

background的属性有以下这些：

background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image

1.background-color就不说了。

2.background-position：属性设置背景图像的起始位置

。

有left,top,right,bottom,center五个值组合显示位置。如果只写第一个，第二个省略默认center。
x% y%:第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
Xpx Ypx: 第一个值是水平位置，第二个值是垂直位置。

3.background-size:规定背景图像的尺寸

length:

设置背景图像的高度和宽度

。

第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
percentage:

以父元素的百分比来设置背景图像的宽度和高度

。

第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

4.background-repeat:规定如何重复背景图像。默认地，背景图像在水平和垂直方向上重复。

repeat-x,repeat-y 背景图像将在水平方(垂直)向重复。
no-repeat：不重复。
inherit:规定应该从父元素继承 background-repeat 属性的设置。

5.background-origin: 规定背景图片的定位区域。

padding-box:背景图像相对于内边距框来定位。
border-box:背景图像相对于边框盒来定位。
content-box:背景图像相对于内容框来定位。

6.background-clip:规定背景的绘制区域。背景被裁剪到什么位置，和origin属性相似

padding-box:背景图像被裁剪到内边距内部。
border-box: 背景图像被裁剪到边框内部。
content-box:背景图像被裁剪到内容框内部。

7.background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动。

scroll：默认值。背景图像会随着页面其余部分的滚动而移动。
fixed：当页面的其余部分滚动时，背景图像不会移动。
inherit:规定应该从父元素继承 background-attachment 属性的设置。

今天主叫就是background-size的contain属性，它把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，很适合做缩略图：

  <!--css部分-->
  li{
    display: inline-block;
    width: 140px;
    height: 140px;
    border: solid 1px #eee;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
 <!--html部分-->
 <li style="background-image: url('./assets/banner1.jpg')"></li>
 <li style="background-image: url('./assets/loginbg.png')"></li>

效果如下：无论尺寸怎么的图片动能很好的适应显示

用完就会发现，我喜欢直接写img标签，这个都没有img标签了，不要着急，下面就介绍img标签如何实现这个效果

方法二：img的object-fit: contain;

object-fit这个css标记，好像有些陌生。先就把它的知识点讲一下详细内容见张鑫旭博客的这一属性讲解

链接

1.object-fit有以下这些属性

fill

: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
contain

: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover

: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
none

: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down

: 中文释义“降低”。就好像依次设置了

none

或

contain

, 最终呈现的是尺寸比较小的那个。

2.object-fit的兄弟 object-position

object-position 默认值是
50% 50%
，也就是居中效果和background-position 写法和表现都一致。

例如替换内容一直定位在容器的右下角：

object-position: 100% 100%;

例如替换元素相对于右下角20px 10px地方定位：

object-position: right 20px bottom 10px;

3.object-fit的适用性

object-position
和
object-fit
只针对

替换元素

有作用；

替换元素：其内容不受CSS视觉格式化模型（中文释义参见

这里

）控制的元素，比如
image
, 嵌入的文档(
iframe
之类)或者
applet
。比如，
img
元素的内容通常会被其
src
属性指定的图像替换掉。替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。另一方面，其他文档也可能没有固有的尺寸，比如一个空白的html文档。

CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。
object
,
video
,
textarea
,
input
也是替换元素，
audio
和
canvas
在某些特定情形下为替换元素。

使用CSS的
content
属性插入的对象是匿名替换元素（整段抄袭张老师的）

4.兼容性ie的方法

键连接

object兼容解决

实现和background一样的demo

  <!--css-->

  li{
    display: inline-block;
    width: 140px;
    height: 140px;
    border: solid 1px #eee;
  }
  li>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  <!--htmls-->

  <li><img src="assets/banner1.jpg"></li>
  <li><img src="assets/loginbg.png"></li>

以下是两种方法实现的效果

原文链接：https://blog.csdn.net/qq_34690340/article/details/88534598

方法一 ：css的background属性来设置背景图

知识点总结

方法二：img的object-fit: contain;

你可能也喜欢

方法一：css的background属性来设置背景图