CSS3的出现让我们开发网页变得更加轻松,其中一个很常用的功能就是在按钮上添加图片。但是当图片尺寸和按钮尺寸不一样时,我们发现,图片会一直往上顶,不会居中。那么,我们该如何让图片在按钮内居中呢?.bt...
CSS3的出现让我们开发网页变得更加轻松,其中一个很常用的功能就是在按钮上添加图片。但是当图片尺寸和按钮尺寸不一样时,我们发现,图片会一直往上顶,不会居中。那么,我们该如何让图片在按钮内居中呢?
.btn {
width: 100px;
height: 50px;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
}
.btn img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
} 首先,我们给按钮设置了宽度和高度,并设置了背景色。
接着,在按钮上使用了flex布局,并将其justify-content和align-items都设置为center,来实现在容器内居中。
最后,针对图片,我们设置了max-width和max-height都为100%,让图片按比例缩放,并使用object-fit: contain,来让图片适应容器大小,并保持其宽高比。
这样,我们就可以轻松地实现图片在按钮内居中了。