我目前正在NextJS中尝试样式化一个页面。我有一个图像在一个div中的锚中。我想调整图像的大小,但无论我怎么尝试,似乎都不起作用。
我试着将属性应用于所有三个元素,每个元素单独应用,一次两个。
相关代码:
<div className={styles.projectContainer}>
<div className={styles.projectDescriptionContainer}>
<h3>Title</h3>
<p>Lorem ipsum etc..</p>
</div>
<div className={styles.projectPhotoContainer}>
<a className={styles.projectLink}
href="heroku link"
target="_blank">
<img src='/local-file.png' />
</a>
</div>
</div>
.projectContainer {
display: inline-block;
width: 100vw;
height: 10vh;
}
.projectDescriptionContainer {
display: inline-block;
width: 20vw;
height: 10vh;
}
.projectPhotoContainer {
display: inline-block;
width: 20vw;
height: 20vh;
}
.projectLink {
display: inline-block;
}
.img {
object-fit: cover;
width: 100%;
height: auto;
}
2条答案
按热度按时间mklgxw1f1#
链接没有任何宽度大小。添加:
另外,您的
object-fit: cover;
需要一个高度。auto
不起作用zkure5ic2#
好吧,这个问题已经问了一段时间了,自从几天前我遇到同样的情况,我想和大家分享一下。
你必须在锚标签上工作,确保添加内联CSS代码:
会成功的伙计!