Image height doesn't want to be adjusted in css

Question

I'm having problems with an image in my project, I would like it to occupy 20% of width and the height to adjust to maintain its proportion, without stretching or compressing it, but when I try to define its height whatever it is nothing happens, and when I try to take its width makes it occupy the entire area. I don't know what in my css could be causing this so I'll send it as everything is, however the problem is happening with the image2 found in the final part.

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

.image2{
  width: 20%;
  height: auto;
}

.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
}

import React from 'react';
import './style.css';

const AboutMeSection = () => {
  return (
    <div className="about-me-section">
        <div className="image2">
        <img src="./selfiepretoebranco.jpg" alt="Eduardo" className="image" />
        </div>

}

I already tried resetting the height with different values or setting the height and making the width adjust from there, but no matter what the case, the image is not being affected by the height.

Answer 1

You can set the img's parent to width:20%; and the img to width:100%;:

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

.image2{
  width: 20%;
  height: auto;
}
.image{
  width:100%
}

<div class="about-me-section">
    <div class="image2">
    <img src="https://randomwordgenerator.com/img/picture-generator/54e2d6444d56b10ff3d8992cc12c30771037dbf852547940752779d79e4b_640.jpg" alt="Eduardo" class="image" />
</div>