css图片的自适应排版

  • Post author:
  • Post category:其他


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

方法一 :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>

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



版权声明:本文为qq_34690340原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。