服务器之家
您的位置： 首页 编程语言 css

纯 CSS 简单实现图片自适应水平垂直居中

100人浏览   2024-12-17 08:03:31

本方法适用图片尺寸不一，且需要根据页面大小实现自适应等比缩放的情况；

之前一直用的是背景图的方式来实现这个效果，可以这样做的一个弊端是不利于SEO 的优化，所以决定换种方式写，综合网上搜出来的文章，写了这个教程，供新手学习使用。

实现样式：

demo1

先上代码：

HTML结构

<div class="wide">

<div class="img-wrap">

<div>

<img src="./test_img.jpg" />

</div>

</div>

<p class="goods-name">商品名称</p>

</div>

CSS样式

.wide {

width: 60%;

height: auto;

margin: 0 auto;

border: 1px solid #f2f2f2;

}

.wide .goods-name {

width: 100%;

height: 28px;

font-size: 14px;

padding: 0 10px;

box-sizing: border-box;

background-color: #fff;

}

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

width: 100%;

height: 0;

padding-bottom: 60%;

overflow: hidden;

position: relative;

background-color: lightgray;

}

.img-wrap > div {

width: 100%;

height: 100%;

position: absolute;

display: flex;

align-items: center;

justify-content: center;

}

.img-wrap > div img {

width: auto;

height: auto;

max-width: 100%;

max-height: 100%;

}

简要说明：

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

2、图片宽高 { width: auto; height: auto; max-width: 100%; max-height: 100%; } 这样图片可以自适应按父元素宽高等比例显示；

3、至此图片自适应就写好了，下面就是居中；

4、居中的方法很多；我这里用了flex布局，很容易就可以实现，如果要兼容IE和多版本浏览器请用其它居中方法实现；

补充：在设置图片时，可以把宽、高都设置成100%，然后使用CSS比较新的属性 object-fit 来实现图片按比例自适应居中显示。

相关推荐