Question

这里我有一个图像，当你扩展浏览器窗口时它会缩放，直到达到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>

Answer 1

你可以这样做：

img.full {
            width: 100%;
            display: block;
            top: 50%;
            transform: translateY(-50%);
        }

将图像向上移动至容器高度的50％，然后将其向上移动50％的图像高度，从而使其垂直居中。

但是，容器元素需要一个定义的高度和position设置为relative才能生效。

...你可以对水平居中做同样的事情：left: 50%; transform: translateX(-50%);

容器中的图像可以从其中心缩放吗？

1 个答案: