除非我更改最大宽度，否则 css 图像最大高度无效答案

【问题标题】：css image max-height has no effect unless I change the max-width除非我更改最大宽度，否则 css 图像最大高度无效
【发布时间】：2020-08-17 11:04:03
【问题描述】：

我是一名全栈开发人员，但 css 是我的弱点，所以我决定在这方面付出更多努力。我有一个奇怪的情况，无法弄清楚为什么。问题是我无法正确调整图像的高度和宽度。我正在使用 reactstrap、bootstrap 和 scss，但我确保引导代码不会覆盖我的 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% 它没有第一张图像那么宽 :(

【问题讨论】：

标签： javascript css reactjs sass next.js

【解决方案1】：

为什么文字在图片外面？

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

使用图像作为背景图像。完全从 HTML 中取出 .img 类和图像标记。像这样设置.hero-section css


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

}

我在下面的代码框里有一个模拟代码

【讨论】：

【解决方案2】：

[编辑]：我忘记了我是这个世界上唯一一个允许运行良好的堆栈闪电战的人，所以以防万一这里是代码：

<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

如果没有，请您提供您的图像的形状吗？我的意思是，它是一个充满蓝色的 loooong 垂直图像，还是只是男孩和屏幕、书籍和其他东西以及为您的容器设置为相同蓝色的背景颜色？

【讨论】：