React项目中图片宽高比例无法正常控制问题求助

问题根源 #

你当前的CSS把width:20%和height:auto应用在了图片的父容器.image2上，但实际需要控制尺寸的是<img>标签本身。父容器的宽度设置只会限制容器的可用空间，但图片默认会按自身原始尺寸渲染，不会自动继承父容器的宽度，这就导致你设置的height属性完全不起作用，移除width时图片还会撑满整个区域。

解决方案 #

直接将尺寸控制样式应用到<img>的类.image上，或者让父容器固定宽度，图片自适应父容器的尺寸，两种方案任选其一：

方案1：直接给图片设置样式

.about-me-section{
  height: 100vh;
  width: 100%;
}

/* 父容器可保留布局样式，无需设置宽度 */
.image2{
  /* 可添加margin、padding等布局属性 */
}

/* 核心：给img标签设置尺寸 */
.image {
  width: 20%;
  height: auto;
  /* 可选：防止图片超出容器，添加max-width:100% */
}

/* 以下样式保持不变 */
.titulo2{
  position: absolute;
  text-align: center;
  font-size: 100px;
  border: 1px solid;
  margin: 0;
  padding: 0;
  width: 60%;
  left: 30%;
  top: 110vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #1e1e1e;
}

.description1{
  font-family: Helvetica;
  color: #1e1e1e;
  position: absolute;
  text-align: left;
  font-size: 25px;
  margin: 0;
  padding: 0;
  width: 60%;
  left: 32%;
  top: 135vh
}

.description2{
  font-family: Helvetica;
  color: #1e1e1e;
  position: absolute;
  text-align: left;
  font-size: 15px;
  margin: 0;
  padding: 0;
  width: 58%;
  left: 32%;
  top: 143vh
}

方案2：父容器控制宽度，图片自适应父容器

.about-me-section{
  height: 100vh;
  width: 100%;
}

/* 父容器设置宽度 */
.image2{
  width: 20%;
}

/* 图片自适应父容器宽度 */
.image {
  width: 100%;
  height: auto;
}

/* 其他样式保持不变 */

效果说明 #

两种方案都能实现图片宽度占20%、高度自适应保持原始比例的需求，不会出现拉伸或压缩的情况。

内容的提问来源于stack exchange，提问作者Eduardo Pontes