css - 居中筛选具有最大高度和最大宽度的图像

Question

我尝试为论坛之类的东西制作一个功能。人们可以使用自定义 BBcode 生成图像的缩略图，然后单击我会看到一个图像模式，其中包含具有最大高度和最大宽度的动态尺寸图像。

图像模式存在我的问题。我无法使结果正确居中到屏幕。像这样格式化时，图像水平居中但垂直贴在顶部。我能做些什么？

HTML：

<div class="wrapperDiv">
    <img class="fullimage" src="$someUrl">
</div>

CSS：

.wrapperDiv {
    position: fixed;
    display: block;

    height: 100%;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);  

    z-index: 10000;
}

 .fullimage {
    height: 100%;

    max-height: 500px;
    max-width: 500px;
}

标签： css

Answer 1

您应该尝试使用 flex 代替，如下所示：

.wrapperDiv {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.fullimage {
  height: 100%;
  max-height: 500px;
  max-width: 500px;
}

https://codepen.io/GuillaumeGautier/pen/rNxxKJZ