容器中的图像可以从其中心缩放吗？
Posted
技术标签:
【中文标题】容器中的图像可以从其中心缩放吗？【英文标题】：Can an image in a container scale from its center? 【发布时间】：2016-05-06 00:37:45 【问题描述】：这里我有一个图像，当您扩大浏览器窗口时，它会缩放，直到它达到 600 像素高，即其父容器的最大高度。此时，图像相对于图像的顶部被裁剪。是否可以让图像在其父容器中垂直居中，以便图像从其中心缩放？它需要保留为图像，而不是背景图像。
<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>
【问题讨论】：
【参考方案1】：你可以这样做：
img.full
width: 100%;
display: block;
top: 50%;
transform: translateY(-50%);
它将图像从上向下移动到容器高度的 50%，然后再向上移动到图像高度的 50%，从而使其垂直居中。
但是，容器元素需要定义高度和position 设置relative 才能工作。
...您可以对水平居中执行相同的操作：left: 50%; transform: translateX(-50%);
【讨论】：
而 img.full 需要位置：绝对。谢谢！以上是关于容器中的图像可以从其中心缩放吗？的主要内容，如果未能解决你的问题，请参考以下文章