css图像的max-height无效，除非我更改了max-width

Question

我是一个全栈开发人员，但css是我的弱点，所以我决定在上面多下功夫。我有一个奇怪的情况，不知道为什么。问题是我不能适当地调整图像的高度和宽度。我正在使用reactstrap、bootstrap和scss，但我确保bootstrap代码不会覆盖我的css：

import "bootstrap/dist/css/bootstrap.min.css";
import "../styles/main.scss";

下面是html的一部分：

  <Col md="6">
            <div className="hero-section">
              <div className={`flipper ${isFlipping ? "isFlipping" : ""}`}>
                <div className="front">
                  <div className="hero-section-content">
                    <h2> Full Stack Web Developer </h2>
                    <div className="hero-section-content-intro">
                      Have a look at my portfolio and job history.
                    </div>
                  </div>
                  <img
                    alt="programming welcome picture"
                    className="image"
                    src="/images/original.png"
                  />
                  <div className="shadow-custom">
                    <div className="shadow-inner"> </div>
                  </div>
                </div>
    </Col>

下面是相关的css代码：

.hero-section {
  h2 {
    color: black;
    font-weight: bold;
    margin-bottom: 10px;
  }


  perspective: 10rem;
  color: black;
  font-weight: bold;
  width: 40rem;
  position: relative;

  &-content {
    position: absolute;
    bottom: 20px;
    width: 360px;
    left: 6%;
    z-index: 1;

    &-intro {
      font-size: 17px;
    }
  }
}


 .image {
  max-width: 100%;
  // background-size: cover;
  max-height: 50%;
  position: relative;
  background-position: center;
}

有了这个，我得到了这个：

​

但是，使用此.image

.image {
  max-width: 100%;
  // background-size: cover;
  // max-width: 100%;
  max-height: 100%;
  position: relative;
  background-position: center;
}

我也有同样的看法。如果我改变宽度，高度也会改变，但我只想改变高度。

图像css我有这个

使用此.image

.image {
  max-height: auto;
  max-width: 100%;
  background-position: center;
  background-size: cover;
}

我得到了图像之外的文本:(即使max-width: 100%，它也没有第一张图像那么宽:(

​

​

Answer 1

编辑：我忘了我是这个世界上唯一一个允许堆栈闪电战正常工作的人，所以为了以防万一，下面是代码：

<div className="content">
    <h2>FullStack developerdfghbdfg</h2>
    <p>Were you looking for something like this ?</p>
</div>

和CSS部分：

.content {
  padding: 15px;
  padding-top: 200px;
  max-width: 200px;
  background-image: url('https://picsum.photos/200/300'); /* you need an HD image to do this */
  background-size: cover; /* because thiswill strech your image */
  color: red; /* pretty disgusting yeah ! */
}

你在找这样的东西吗？Stackblitz example

如果没有，你能提供你的形象的形状吗？我的意思是，它是一个充满蓝色的长长的垂直图像，还是仅仅是男孩、屏幕和书籍之类的东西，并且为你的容器设置了相同的蓝色背景颜色？

Answer 2

为什么文本在图像之外？

TL;TD:图像小于40rem。

这是一个太长而无法阅读的版本：

通过将max-width设置为100%，图像将允许自身采用其固有宽度的100%，但由于height设置为auto，因此图像宽度将由图像的固有高度决定，从而使其宽度从100%变为分数。

为什么图像比你下面的第一个场景更宽更高？

.image {
  // allows the image to take up 100% of its width
  max-width: 100%;
  // allows the image to take up 100% of its height
  max-height: 100%;
  ...
}

由于<img>元素是replaced element类型，并且未定义其object-fit css属性，因此图像将占用固有的宽度/高度值。

解决方案1

将div.hero-section设置为固定的宽度和高度，如下所示

.hero-section {
  // ie. height/width can be anything you like
  height: 20rem;
  width: 40rem;
  ...
}

然后在.image类中将object-fit属性设置为cover

.image {
  ...
  object-fit: cover
}

解决方案2

使用图像作为背景图像。完全从.img中去掉HTML类和图像标记。如下所示设置.hero-section css

.hero-section {
  ...
  width: 40rem;
  height: 20rem;
  background-size: cover;
  background-position: center;
  background-image: url("/images/original.png");
  ...

}

我在下面的codesandbox中有一个代码的模拟

​

​