Question

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

我已经尝试了一切，似乎没有任何工作！我希望整个页面能够相应地进行缩放，包括两个图像（特别是摩托车头盔图片），随着屏幕尺寸缩小或放大。

我想知道如何设置我的移动优先min-width media-query以实现所有图像的预期效果，或者只有摩托车头盔图像从小到大从手机扩展到桌面。我还希望按钮保持与发生的位置相同的位置。非常感谢你的帮助？

您可以在此处查看我的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将始终将图像缩放为完全可见，同时保持宽度/高度比例保持不变以避免图像失真。

如何获取父和嵌套Div的背景图像以响应缩放

1 个答案: