css 我如何轻推一个图像,以显示中心的图像在div?

tzxcd3kk  于 2023-05-19  发布在  其他
关注(0)|答案(1)|浏览(130)

谁能帮助谁,
我在这里使用这个答案(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>
    )
}
nimxete2

nimxete21#

如果我理解正确,并且您正在尝试将图像向上移动,那么您可以在css文件中使用transfrom:translate(x,y)
所以你的代码可能看起来像这样:

.recentWorkContent img {
    position: relative;
    transform: translate(0px, -10px);
    display: block;
    width: 100%;
}

这将使图像向上移动10个像素。希望这能帮上忙。

相关问题