gpt4 book ai didi

html - Flexbox 溢出 - 元素的顶部丢失了吗?

转载 作者:行者123 更新时间:2023-11-28 05:22:26 25 4
gpt4 key购买 nike

<分区>

我正在使用以下 HTML 结构:

<div class="imgview_overlay" id="imageviewer">
<div class="overlay_content">
<div class="overlay_inner" id="overlay_img_div">
<img id="overlay_img" alt="overlayed_image" style="visibility: hidden;" />
</div>
</div>
</div>

使用以下 CSS:

.imgview_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.2); visibility: hidden; z-index: 500; }
.overlay_content { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; overflow: auto; }
.overlay_inner { display: inline-block; }

水平和垂直居中 <img>覆盖层内的标记。

overflow: auto;做它的工作,但不正确。图像的顶部(当页面缩小时)不会出现。例如,查看 this fiddle 。关于如何解决这个问题的任何想法?

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com