如何相对于图像定位 div？

Question

我有一个作品集页面，其中包含一个网格，其中包含带有信息叠加的图像。

这是链接：cyrilmoisson-dev.netlify.app

有没有一种解决方案可以使覆盖 div 的大小（高度和宽度）与图像完全相同，而不使用类似的东西background: url(...); 问题是图像是随机大小的......

这个问题不是这个问题的重复，因为它还没有为我解决。

这是每个图像的组件代码：

src/component/ImageWithInfos/ImageWithInfos.jsx:

// Lazyload

import LazyLoad from 'react-lazyload';

// Style

import { ImageContainer, ImageSrc, ImageInfoContainer, ImageInfo } from './styles';

// Utils

import 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.js

export { default } from './ImageWithInfos';

感谢您的帮助。

顺便说一句：我正在使用反应和样式组件，如果它改变了什么......

Answer 1

我相信您可以将图像和覆盖层放在同一个 div 中，并让覆盖层元素覆盖整个父 div：<div className="parent">&nbsp; <img />&nbsp; <div className="overlay"></div></div>.parent {&nbsp; position: relative;}.overlay {&nbsp; position: absolute;&nbsp; width: 100%;&nbsp; height: 100%;}