英雄部分的响应式图像在设定宽度之前缩小的问题

Question

我想要什么

我所看到的

我正在制作一个响应式英雄部分，我希望图像保持完整尺寸，直到窗口宽度降至 1300 像素以下。然而，我注意到图像开始缩小得更早，我不确定为什么会发生这种情况。

这是我的 HTML 和 CSS 代码：

/* *************** */
/* HERO-SECTION */
/* *************** */

.hero {
  max-width: 130rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: center;
  column-gap: 9.6rem;
}

.hero h1 {
  font-size: 5.2rem;
  font-weight: 700;
  margin-bottom: 3.2rem;
  line-height: 1;
  letter-spacing: -1px;
}

.hero p {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 4.8rem;
  line-height: 1.5;
}

.btn:link,
.btn:visited {
  font-size: 2rem;
  padding: 1.2rem 3.2rem;
  text-decoration: none;
  display: inline-block;
  background-color: #e67e22;
  color: white;
  border-radius: 1.5rem;
  font-weight: 500;
  transition: all 0.3s;
}

.left:hover,
.left:active {
  background-color: #cf711f;
}

.right:link,
.right:visited {
  background-color: white;
  color: #333;
  margin-left: 2.4rem;
}

.right:hover,
.right:active {
  background-color: #fdf2e9;
  color: #333;
  box-shadow: 0 0 0 3px white;
}

.hero-section {
  background-color: #fdf2e9;
  padding: 16rem 32rem;
}

.head-img {
  width: 100%;
}

.deliver-ithems {
  display: flex;
  align-items: center;
  margin-top: 8rem;
  gap: 1.6rem;
}

.deliver-imgs {
  display: flex;
}

.deliver-imgs img {
  height: 4.8rem;
  width: 4.8rem;
  border-radius: 50%;
  border: #fff solid 2px;
  margin-left: -1.6rem;
}

.deliver-imgs img:first-child {
  margin: 0;
}

.deliver-text {
  font-size: 1.8rem;
  font-weight: 600;
}

.deliver-ithems span {
  color: #cf711f;
}

<header class="hero-section">
  <div class="hero">
    <div class="head-text">
      <div class="text-section">
        <h1>
          A healthy meal <br />delivered to your door, <br />every single day
        </h1>
        <p>
          The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutritional needs.
        </p>
        <a href="#" class="btn left">Start eating well</a>
        <a href="#" class="btn right">Learn more &darr;</a>
        <div class="deliver-ithems">
          <div class="deliver-imgs">
            <img src="img/customers/customer-1.jpg" alt="customer" />
            <img src="img/customers/customer-2.jpg" alt="customer" />
            <img src="img/customers/customer-3.jpg" alt="customer" />
            <img src="img/customers/customer-4.jpg" alt="customer" />
            <img src="img/customers/customer-5.jpg" alt="customer" />
            <img src="img/customers/customer-6.jpg" alt="customer" />
          </div>
          <div class="deliver-text">
            <span>250,000+</span> meals delivered last year
          </div>
        </div>
      </div>
    </div>
    <div class="img-hero">
      <img src="hero.png" alt="tri slike" class="head-img" />
    </div>
  </div>
</header>

我尝试使用正常宽度，仅此而已。我确信我做了对我来说有意义的一切。

Answer 1

您可以使用像素值来表示图像宽度，而不是

.head-img

。然后，当设备宽度达到

100%

时，您可以使用媒体查询来减少。

在这里你可以看到我是如何做到的。

1300px

这是我的输出。