如何相对于图像定位div？
如何相对于图像定位div？
提问于 2020-12-24 19:01:00
我有一个公文包的页面，其中包含一个网格，其中包含一个信息覆盖的图像。
这里有个链接：cyrilmoisson-dev.netlify.app
有没有一个解决方案，使覆盖div完全相同的大小(高度和宽度)的图像，而不使用像background: url(...);的问题是，图像是随机的大小…
这个问题不是this one的副本，因为它还没有为我解决。
以下是每个图像的组件代码：
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/styles.js
// Style
import styled, { css } from 'styled-components';
export const ImageContainer = styled.div`
height: ${({ height }) => `${height}px`};
width: ${({ width }) => `${width}px`};
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
`;
export const ImageSrc = styled.img`
display: block;
object-fit: contain;
width: 100%;
height: 100%;
`;
export const ImageInfoContainer = styled.div`
z-index: 5;
position: absolute;
bottom: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 1s ease;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&:hover {
opacity: 1;
background-color: rgba(0, 0, 0, .7);
scale: 1.1;
}
`;
export const ImageInfo = styled.span`
padding: .2rem 1rem;
color: whitesmoke;
text-align: center;
text-transform: capitalize;
${({ main }) => main && css`
font-weight: 800;
`}
`;src/component/ImageWithInfos/index.js
export { default } from './ImageWithInfos';谢谢你的帮助。
顺便说一句:我正在使用react和styled-components，如果它改变了什么……
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-24 19:07:24
我相信你可以把图片和覆盖图放在同一个div中，让overlay元素覆盖整个父div：
<div className="parent">
<img />
<div className="overlay"></div>
</div>.parent {
position: relative;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65437402
复制相关文章
相似问题
腾讯云开发者
