gpt4 book ai didi

javascript - react : How can I position the loading component so it is in the center of the image

转载 作者:行者123 更新时间:2023-11-30 13:53:03 25 4
gpt4 key购买 nike

这是代码和演示:

https://codesandbox.io/s/sparkling-silence-7cv3l

https://7cv3l.csb.app/

我使用 react-image-enlarger 组件来缩放图像,例如 Medium。它有一个 API,renderLoading 用于在下载放大图像时呈现加载组件。所以我为加载组件导入了react-loading

相关代码片段:

<div style={{ margin: "0.25rem" }}>
<Image
style={{ width: "200px", height: "auto" }}
zoomed={zoomed}
src={src}
enlargedSrc={{}}
onClick={() => setZoomed(true)}
onRequestClose={() => setZoomed(false)}
renderLoading={<ReactLoading type={"cylon"} color="black" />}
/>
</div>

现在加载动画出现在图像下方。

enter image description here

但是我想让加载动画位于图像的中心并且应该对图像应用滤镜以使其更暗(可能是亮度(0.7);)

我认为这不是一项微不足道的工作,因为每张图片都有自己的高度和宽度,而且我不是很擅长 CSS,因此非常感谢任何帮助。

最佳答案

尝试使用此 CSS 代码将加载器的位置设置在每张图片的中心。

img.EnlargedImage__Image + div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: rgba(255, 255, 255, 0.75);
height: 100% !important;
width: 100% !important;
}
img.EnlargedImage__Image + div svg {
height: 64px;
width: 64px;
margin: auto;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}

关于javascript - react : How can I position the loading component so it is in the center of the image,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57850161/

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