如何相对于图像定位 div？

Question

我有一个作品集页面，其中包含一个网格，其中包含带有信息叠加的图像。这是链接：cyrilmoisson-dev.netlify.app有没有一种解决方案可以使覆盖 div 的大小（高度和宽度）与图像完全相同，而不使用类似的东西background: url(...); 问题是图像是随机大小的......这个问题不是这个问题的重复，因为它还没有为我解决。这是每个图像的组件代码：src/component/ImageWithInfos/ImageWithInfos.jsx:// Lazyloadimport LazyLoad from 'react-lazyload';// Styleimport { ImageContainer, ImageSrc, ImageInfoContainer, ImageInfo } from './styles';// Utilsimport PropTypes from 'prop-types';import { v4 as uuid } from 'uuid';const ImageWithInfos = ({ height, width, src, title, infos }) => (    <LazyLoad height={height} offset={height + 100}>        <ImageContainer height={height} width={width}>            <ImageSrc src={src} alt={title} />            <ImageInfoContainer>                <ImageInfo main>{title}</ImageInfo>                {infos.map((info) => <ImageInfo key={uuid()}>{info}</ImageInfo>)}            </ImageInfoContainer>        </ImageContainer>    </LazyLoad>);ImageWithInfos.propTypes = {    height: PropTypes.number.isRequired,    width: PropTypes.number.isRequired,    src: PropTypes.string.isRequired,    title: PropTypes.string.isRequired,    infos: PropTypes.array,};export default ImageWithInfos;src/component/ImageWithInfos/index.jsexport { default } from './ImageWithInfos';感谢您的帮助。顺便说一句：我正在使用反应和样式组件，如果它改变了什么......

Answer 1

我相信您可以将图像和覆盖层放在同一个 div 中，并让覆盖层元素覆盖整个父 div：

<div className="parent">

  <img />

  <div className="overlay"></div>

</div>

.parent {

  position: relative;

}

.overlay {

  position: absolute;

  width: 100%;

  height: 100%;

}