时间戳

首页 > 解决方案 > 除非我更改最大宽度，否则 css 图像最大高度无效

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

问题描述

我是一名全栈开发人员，但 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;
}

我在图像之外获取文本 :( 即使最大宽度：100% 它没有第一张图像那么宽 :(

在此处输入图像描述

标签： javascriptcssreactjssassnext.js

解决方案

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

<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 示例

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

推荐阅读