css居中不变形缩略图 |jquery判断css

java css页面，点击后变色css，CSS模板双人自拍室内，css图片纵向弹性布局，css中按钮间距怎么设置，html加css网页案例实战，jquery判断css css居中不变形缩略图 |jquery判断css

.thumbnail {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
.thumbnail img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: none;
max-height: none;
width: auto;
height: auto;
}

首先，大家需要创建一个包含缩略图的容器，给容器设定宽度和高度，以及相对定位和超出部分隐藏。

当缩略图超过容器大小时，大家需要将图片置于容器的中心位置，保证居中效果。这时候，大家需要给图片绝对定位，并且通过”top: 50%; left: 50%;”将图片向右下角偏移了一半的位置。”translate(-50%, -50%)”将图片向左上角偏移了一半的位置，再加上“max-width: none; max-height: none; width: auto; height: auto;”可以保证图片不会变形，适应容器大小。

以上CSS代码实现了居中不变形缩略图的效果，可以在实际开发中应用。