谁能帮助谁,
我在这里使用这个答案(Get div to shrink with image inside of it)最初是为了找出主要问题,但现在我想把图像向上推,以显示图像的中心。我最初是用我的原始代码通过使用bottom: 100px
来做这件事的,但是我发现的SO答案不允许bottom工作。我也试过保证金底部,看看这是否会工作,但没有运气。有人能帮忙吗?
.recentWorkContent div {
display: inline-block;
overflow: hidden;
max-width: 1100px;
max-height: 300px;
}
.recentWorkContent img {
position: relative;
display: block;
top: 0;
left: 0;
width: 100%;
}
HTML
// IMGS:
import capeCod from '../../imgs/morningMode.png'
import CBMediaLogo from '../../imgs/CBMedia_White.png'
// CSS:
import styles from './RecentWork.module.css'
// SKILLS:
export default function RecentWork() {
return (
<div>
<div className={styles.recentWorkHeaderBox}>
<h1>Recent Work</h1>
</div>
<section className={styles.recentWorkMain}>
<div className={styles.recentWorkContent}>
<div>
<img src={capeCod} alt="" srcset="" />
<div className={styles.imageOverlay}>
<div>
<div>
<h2>Title</h2>
<p>this is the text.</p>
</div>
<div>
<img className={styles.logo} src={CBMediaLogo} alt="" srcset="" />
</div>
</div>
</div>
</div>
<div>
<img src={capeCod} alt="" srcset="" />
</div>
<div>
<img src={capeCod} alt="" srcset="" />
</div>
</div>
<button>View More</button>
</section>
</div>
)
}
1条答案
按热度按时间nimxete21#
如果我理解正确,并且您正在尝试将图像向上移动,那么您可以在css文件中使用
transfrom:translate(x,y)
。所以你的代码可能看起来像这样:
这将使图像向上移动10个像素。希望这能帮上忙。