在这里,我有一幅图像,它随着您扩大浏览器窗口而缩放,直到达到600px高(其父容器的最大高度)。此时,图像相对于图像顶部被裁剪。是否可以使图像在其父容器中垂直居中,以便图像从其中心缩放?它需要保留图像,而不是背景图像。
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.full-width {
max-height: 600px;
overflow: hidden;
}
img.full {
width: 100%;
display: block;
}
</style>
</head>
<body>
<section class="full-width">
<img class="full" src="http://toprival.com/temp/panda/images/panda.jpg" />
</section>
</body>
最佳答案
你可以这样做:
img.full {
width: 100%;
display: block;
top: 50%;
transform: translateY(-50%);
}
它将图像从顶部向下移动到容器高度的50%,然后再向上移动到图像高度的50%,从而使其垂直居中。
但是,容器元素需要定义的高度和
position
的relative
设置才能起作用。...并且您可以对水平居中进行相同操作:
left: 50%; transform: translateX(-50%);