我有一個(gè)作品集頁(yè)面,其中包含一個(gè)網(wǎng)格,其中包含帶有信息疊加的圖像。這是鏈接:cyrilmoisson-dev.netlify.app有沒(méi)有一種解決方案可以使覆蓋 div 的大?。ǜ叨群蛯挾龋┡c圖像完全相同,而不使用類(lèi)似的東西background: url(...); 問(wèn)題是圖像是隨機(jī)大小的......這個(gè)問(wèn)題不是這個(gè)問(wèn)題的重復(fù),因?yàn)樗€沒(méi)有為我解決。這是每個(gè)圖像的組件代碼: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';感謝您的幫助。順便說(shuō)一句:我正在使用反應(yīng)和樣式組件,如果它改變了什么......
如何相對(duì)于圖像定位 div?
瀟瀟雨雨
2024-01-18 15:50:47