图片布局css

来源:转载

  • 对于平时项目开发中,经常要展示图片。什么水平居中显示,垂直居中显示,水平或垂直居中显示...我们的发际线就是这样往后退的。

  • 接下来要讲的就是对于各种图片布局的css实现(这里针对的是img标签的不会使用到background)

1.最简单的水平居中

 

1.水平居中

效果如下:

2.垂直居中(这里介绍两种)

第一种:

在图片父元素添加一个伪类before,利用vertical-align: middle的特性让图片垂直居中,不过感觉不是很方便

第二种:

我比较推荐第二种使用css3的新属性,不要跟我说兼容,我不管。。。。

这里主要用到transform的translateY它可以让元素基于它本身移动,而且参数能填写自身的百分百,看代码好了

效果如下:

垂直水平居中

这个我想通过上面说的应该也能猜到怎么实现了

.exa2 img {

width: 300px;

position: relative;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

}

yabo亚博真人娱乐就是加个left和translateX,其它都一样,如果要用垂直居中的第一种方法在父元素增加text-alegn:center;效果是一样的。代码就不贴了。

效果如下:


用法:

object-position:value, value;

value可以是'center', 'left', 'bottom', 'right'或者是百分百,px;


图片自适应宽度或高度100%

可能项目中会有这种情况,容器大小是固定的,可是图片的尺寸确不同的。

这里就可以用到object-fit了在通过垂直水平居中就可以达到很好的效果了(同样这里也是不兼容大IE的)。下面是object-fit的值:

用法:

img {

width: 100%;

height: 100%;

object-fit: contain;

}

如果想要兼容性好点可以用下面的方法,不过缺点就是图片的自身尺寸要比容器大才行:

 

图片自适应宽度或高度100%

效果图如下:

图片要铺满整个容器,但是不能变形

这里只能用到object-fit的cover;不过有兼容性问题。

img {

width: 100%;

height: 100%;

object-fit: cover;

}

效果如下:

分享给朋友:
您可能感兴趣的文章:
随机阅读:
栏目列表
推荐内容