问题

我在项目中遇到了图像问题，我希望它占据宽度的20％，高度自动调整以保持其比例，而不拉伸或压缩它，但是当我尝试定义其高度时，无论高度是多少，都没有任何变化，而当我尝试设置其宽度时，它占据了整个区域。我不知道我的CSS中可能会导致这种情况，所以我会将它发送出来，然而问题是发生在最后部分的image2上。

```lang-css
.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>
    </div>
  );
}

我已经尝试了不同数值来重置高度，或者设置高度并使宽度从那里调整，但无论如何，图像都不受高度的影响。

<details>
<summary>英文:</summary>

I&#39;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&#39;t know what in my css could be causing this so I&#39;ll send it as everything is, however the problem is happening with the image2 found in the final part.


```lang-css
.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, &#39;Segoe UI&#39;, Roboto, Oxygen, Ubuntu, Cantarell, &#39;Open Sans&#39;, &#39;Helvetica Neue&#39;, 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.

答案1

得分: 0

你可以将img的父元素设置为width:20%;，将img本身设置为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>
</div>

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