英文:
How do i nudge an image up to show center of image in div?
问题
To whom who can help,
我最初在这里使用了这个答案（https://stackoverflow.com/questions/42552203/get-div-to-shrink-with-image-inside-of-it）来解决主要问题，但现在我想要能够上移图像以显示图像的中心。最初，我在我的原始代码中使用bottom: 100px来实现这个效果，但我找到的Stack Overflow答案不允许bottom起作用。我还尝试了margin-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>
)
}
英文:
To whom who can help,
I used this answer here (https://stackoverflow.com/questions/42552203/get-div-to-shrink-with-image-inside-of-it) originally to figure out the main issue, but now I want to be abke to nudge the image up to show the center of the image. I was doing this originally with my original code by using bottom: 100px, but the SO answer i found does not allow bottom to work. I have also tried margin bottom to see if that would work, but no luck. Can anyone help?
.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
得分: 1
如果我理解正确，你想将图像向上移动，那么你可以在CSS文件中使用transform: translate(x,y)。
所以你的代码可能会类似这样：
.recentWorkContent img {
position: relative;
transform: translate(0px, -10px);
display: block;
width: 100%;
}
这将把图像向上移动10像素。
希望对你有所帮助。
英文:
If I understood correctly and you are trying to move the image upwards then you can use transfrom:translate(x,y) in the css file.
So your code might look something like:
.recentWorkContent img {
position: relative;
transform: translate(0px, -10px);
display: block;
width: 100%;
}
this will move the image 10 pixels upwards.
Hope this helps.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论