时间戳

首页 > 解决方案 > 在锚标记内调整图像大小

css - 在锚标记内调整图像大小

问题描述

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

标签： cssnext.js

解决方案

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

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

另外，你object-fit: cover;需要一个高度。auto行不通

推荐阅读