问题描述
我刚刚为自己构建了一个包含图像的容器，悬停时会显示文本。但是现在，如果我将其中一些容器粘贴到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",/* hover on*/
transition: "opacity 0.2s ease-out,}
}
},img: {
objectFit: "cover"
}}));
标记赋予display: flex,justify-content: center,align-items: center
和最大宽度引起的。 img标记使用width时，它总是为img留出空间。在我的用例中，width中的max-width通常比max-width小。
有什么办法可以解决这个问题？
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）