html - 如何获取父级和嵌套 Div 的背景图像以进行响应式缩放

Question

如何使用以下媒体查询使我的父 div 和嵌套 div 的背景图像以移动优先的方式响应式缩放。

我已经尝试了所有方法，但似乎没有任何效果!我希望整个页面随着屏幕尺寸的缩小或放大而响应地缩放，其中包括两个图像(尤其是摩托车 Helm 图片)。

我想了解如何设置我的移动设备优先 min-width media-query 以实现所有图像的预期效果，或者仅用于缩放的摩托车 Helm 图像从小到大，从手机到桌面。我还希望按钮保持在与发生时相同的确切位置。非常感谢您的帮助？

您可以在这里查看我的 CodePen 代码:https://codepen.io/IDCoder/full/KZqNdr/

.container {
  text-align: center;
  background-image: url("https://s25.postimg.org/9pnce8yr3/galaxy-s8_overview_kv_type1b.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
  margin: auto;  
}

h1 {
  color: white;
}

.Motorcycle {
  margin: auto;
  width: auto;
  text-align: center;
}

.btn.btn-default {
  color: #0040ff;
  font-size: .80em;
  font-family: Orbitron, sans-serif;
  line-height: 4em;  
}

.gstuff {
  background-image: url("https://s25.postimg.org/b9aat9l7j/G_Motorcycle_Helmet_2.png");
  background-repeat: no-repeat;
  background-position: center;
  width: 500px;
  height: 681px;
  margin: auto;
  opacity: 0.85;
}

#push-one {
  transform: translateY(200px);
  background-color: #c6c6c4;
  border-bottom: 2px inset #FFF;
  border-right: 2px inset #FFF;
  border-radius: 15px;
  height: 50px;
  width: 150px;
  margin: auto;
}

#push-two {
  transform: translateY(530px);
  background-color: #c6c6c4;
  border-bottom: 2px inset #FFF;
  border-right: 2px inset #FFF;
  border-radius: 7px;
  height: 30px;
  width: 50px;
  margin: auto;
  line-height: 2em;
  color: blue;
}

@media (min-width: 500px){
  .gstuff {}
}

<div class="container">
  <div class="Motorcycle">
    <h1>Random Quote Machine</h1>
    <div class="gstuff">
      <div class="btn btn-default" id="push-one">
        Generate Quote
      </div>
      <div class="quote-box">
        <p id="quote"></p>
        <p id="author"></p>
      </div>
      <div class="btn btn-whatever" id="push-two">
        Tweet
      </div>
    </div>
  </div>
</div>

Answer 1

一种简单而无效的方法是使用background-size: cover 或background-size: contain。

cover 将始终缩放背景图像以完全填充元素，contain 将始终缩放图像以使其完全可见，同时保持宽度/高度比例完好无损，以避免图像失真。