Question

我刚刚为自己构建了一个包含图像的容器，悬停时会显示文本。但是现在，如果我将其中一些容器粘贴到flex容器中，似乎在每个图像容器的末尾添加了一些空间。我已经在这个问题上坐了几个小时了，我认为我现在是盲人。我尝试使用存在的所有可能的展示道具，但对我来说都不起作用。谁能帮我？我很绝望

您可以在下图中看到效果： [1]：https://i.stack.imgur.com/Xmeio.jpg

这是组件的HTML：

    <div className={classes.imgWrap} style={props.divStyle}>
        <img className={classes.img} alt="img" src={props.img} style={props.imgStyle} />
        <div className={classes.imgTextWrap} style={props.imgStyle}>
            {props.textComponent}
        </div>
    </div>

style属性仅提供max-width:的{{1}}和400px的{{1}}

样式如下：

width:

包含这些图像组件的容器具有以下样式：

80%

编辑：现在，我知道该空间是由给const useStyles = makeStyles(theme => ({ imgTextWrap: { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, background: fade(theme.palette.primary.light, 0.5), color: theme.palette.contrast, visibility: "hidden", opacity: 0, display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column", /* hover off*/ transition: "opacity 0.3s ease-in, visibility 0.3s", '&:hover': { visibility: "visible", opacity: 1, /* hover on*/ transition: "opacity 0.2s ease-out, visibility 0.2s", } }, imgWrap: { position: "relative", display: "inline-grid", height: "fit-content", width: "fit-content", '&:hover': { '& $imgTextWrap': { visibility: "visible", opacity: 1, /* hover on*/ transition: "opacity 0.2s ease-out, visibility 0.2s", } } }, img: { objectFit: "cover" }}));标记赋予display: flex, justify-content: center, align-items: center和最大宽度引起的。 img标记使用width时，它总是为img留出空间。在我的用例中，width中的max-width通常比max-width小。有什么办法可以解决这个问题？

div在子元素的末尾添加空间

0 个答案: