在定位标记内部调整图像大小

Question

我目前正在尝试在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;
}

Answer 1

链接没有任何宽度大小。添加：

.projectLink {
display: inline-block;
width:100%;
}

此外，您的object-fit: cover;需要一个高度。auto不工作

Answer 2

好吧，这个问题已经被问了一段时间了，因为几天前我也遇到了同样的情况，我想和大家分享一下。

你必须处理锚标签，确保添加内联CSS代码：

<a href="example"  style="width:100%;" >example- image is here</a>

它会起作用的，伙计！