next.js 在锚标记内调整图像大小

tv6aics1  于 2023-01-30  发布在  其他
关注(0)|答案(2)|浏览(135)

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

mklgxw1f1#

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

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

另外,您的object-fit: cover;需要一个高度。auto不起作用

zkure5ic

zkure5ic2#

好吧,这个问题已经问了一段时间了,自从几天前我遇到同样的情况,我想和大家分享一下。
你必须在锚标签上工作,确保添加内联CSS代码:

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

会成功的伙计!

相关问题