html - 我对 CSS 响应式图像的布局感到困扰。我希望听到你的建议

Question

大家好，我有一个 CSS 问题，我感到很困惑！我的英文不是很好，但我进来把我遇到的问题完整表达了~

今天有个项目，有一个block，设计师所有元素上面的按钮和标题都给了一个图片文件~而且不同的设备，这些元素要根据不同的设备调整图片文件的大小~

我尝试使用两种方法：目前只使用第一种方法，

第一种方法：直接把这个block的背景图放在最外层设置内容的background-img，把我要放进去的背景图，在不同设备切换这个背景图。

第二种方式：将背景图片直接放在class="background"的img标签中，然后在背景上使用wrap的绝对定位来调整位置。

不过，这块屏幕还有一个要求，就是背景图片会变化成不同的大小。如果采用第二种方法，则显示：无；必须在不同设备上使用才能隐藏不需要显示的背景图片！

另外，我很困惑。本来就知道只要在内容的background-img中设置背景图片，多少元素就可以支撑整个内容的高度，但是为什么要在内容中设置一个固定的高度：200px；会有高度吗？

最后，我目前用的是方法一，虽然我换了一张768px大小的背景图，但是整个背景图并没有完全显示出来。我不知道出了什么问题？

我的问题可能不够清楚。最后想问一下，如果按照上面的要求，你会怎么完成这个画面呢？谢谢你们

这是我的程序源代码的 URL

.content {
  position: relative;
  max-width: 375px;
  height: 200px;
  margin: 60px auto;
  background-image: url("https://upload.cc/i1/2021/09/09/HizKNM.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.content .title img {
  width: 100px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 89%;
}

.btn {
  width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.social {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translatex(-50%);
  display: flex;
  width: 200px;
}
.social .line {
  width: 100px;
  margin-right: 20px;
}
.social .fb {
  width: 100%;
}

@media (min-width: 768px) {
  .content {
    max-width: 768px;
    height: 200px;
    background-image: url("https://upload.cc/i1/2021/09/09/6ERVi8.jpg");
  }
}

<div class="content">
<!--   <img class="background" src="https://upload.cc/i1/2021/09/09/HizKNM.jpg" alt="">  #Method Two-->
<!-- <div class="wrap"> #Method Two-->
    <h2 class="title">
      <img src="https://upload.cc/i1/2021/09/09/91RNsK.png" alt="">
    </h2>
    <img class="btn" src="https://upload.cc/i1/2021/09/09/xGuPcA.png" alt="">
    <ul class="social">
      <li>
        <img  class="line" src="https://upload.cc/i1/2021/09/09/drEzUk.png" alt="line">
      </li>
      <li >
        <img class="fb" src="https://upload.cc/i1/2021/09/09/0pfYNu.png
  " alt="">
      </li>
    </ul>
<!-- </div> -->
</div>

标签： htmlcssscss-lint