图片与高度重叠答案

【问题标题】：Picture overlaping with height图片与高度重叠
【发布时间】：2022-09-27 21:11:01
【问题描述】：

我有一张有一定尺寸的图片，我需要在图片内实现一个带有按钮的 div，就像这张图片一样。

我试过了，这是我的代码。

.wrapper {
  width: auto;
  text-align: center;
}

.wrapper::before {
  content: \'\';
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(0, 9, 34, 0) 70%, #000922 99.52%);
  width: 100%;
  height: 100%;
  z-index: 10;
}

.background-image {
  display: none;
}

.responsive-image {
  max-width: 100%;
  height: 100%;
}

body {
  background: linear-gradient(180deg, rgba(0, 9, 34, 0) 1%, #000922 100%);
}

.button-position {
  position: absolute;
  bottom: 20%;
  left: 15%;
  z-index: 200;
}

.cta-button {
  padding: 2rem 8rem;
  background: linear-gradient(180deg, #1FD660 0%, #127C38 100%);
  font-family: Barlow;
  color: white;
  font-size: 40px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.2em;
  text-align: center;
}

<div class=\"wrapper\">
  <img class=\"img-fluid responsive-image position-relative\" src=\"https://unsplash.com/random\" />
  <div class=\"button-position\">
      <a class=\"rounded-0 btn cta-button btn-lg btn-block cta-button\" href=\"<?php echo $button[\'new_template_button_link\'] ?>\">
        Button
      </a>
  </div>
</div>

这是我到目前为止所得到的：

但是如你所见，它被拉长了，看起来不像上面的 figma 文件

尝试将图像的高度设置为自动或查看object-fit 属性
@Sfili_81 是的，但是当我将图像高度设置为自动时，它的上方和下方都有边框，我知道那是因为分辨率，但我不知道如何解决这个问题

标签： html css

【解决方案1】：

看起来您正在使用库来调整图像。从您的 HTML 中删除类 img-fluid 和 position-relative。

为了设置背景图像，我将创建一个单独的 div 并将背景图像设置为您的图像。

#hero-div {
  background-image: url('./image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  object-fit: cover;
}

将按钮嵌套在图像内并将其放置在那里。

【讨论】：