CSS教程

css banner图片居中

本文主要是介绍css banner图片居中,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
第一种写法: .bannerBox {   width: 100%;   height: 310px;   background: url(../../assets/img/Admin.png) no-repeat;   background-size: cover;   background-position: center; }   第二种写法:

img有个属性object-fit
属性值:object-fit: fill / contain / cover / none / scale-down;

fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致,长的那条等比缩放,可能会有留白。
cover: 保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致,短的那条等比缩放。可能会有部分区域不可见。
none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down:保持原有尺寸比例,如果容器尺寸大于图片内容尺寸,保持图片的原有尺寸,不会放大失真;容器尺寸小于图片内容尺寸,用法跟contain一样。

属性:object-position

属性值:

水平方向的可取值: [left | center | right] + [length | percentage]
垂直方向的可取值:[top | center | bottom] + [length | percentage]

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: inline-block;
  border: none;
  border-radius: 10px;
}

 

这篇关于css banner图片居中的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!