我想做一个反应灵敏的横幅

Question

我想制作一张反应灵敏的横幅。请看图片。

我正在使用bootstrap。当我在移动屏幕上看到它时，文本和底部图像应相应缩放。任何人都可以帮我实现吗？所有图像，文本都应该响应并相应地缩放。问候。

修改

这通常是我的横幅。在大屏幕上。

当我在小屏幕上看到它时，文字和图像不会缩放，而是重叠。

这是我滑块的代码。另外，我希望底部3个图像是水平的，而不是垂直的。

<!-- Slider -->
<div id="main-slider" class="flexslider">
  <ul class="slides">
    <li> <img src="img/slides/1.png" alt="" />
    </li>
  </ul>
</div>
<div class="flex-caption">
  <p>It's color therapy like you've never seen before!
    <br /> Colorpeutic is available on mobile for <span style="color:red">FREE</span>!
    <br />
    <br /> It's no longer a secret - coloring books have transcended age, and have become a worldwide phenomenon. Just relax and paint in a stress-free environment -- let your imagination soar!
    <br />
    <ul style="color:black !important; font-size:12px !important; line-height:16px !important">
      <li>Available Free on all major mobile platforms including iPhone, iPad, Google Play and Amazon!</li>
      <li>Unlimited colors available for FREE!</li>
      <li>Pinch to zoom on all mobile devices!</li>
      <li>Categories include mandalas, floral, animals, abstract, landscapes and much more!</li>
      <li>Simply pick a color and tap area to fill!</li>
      <li>Easy to save your work, share with friends, or share it online!</li>
    </ul>
  </p>
  <a href="#"><img src="img/app_store.png" alt="" class="img-responsive" style="height:40px; width:150px;" /></a>
  <a href="#"><img src="img/google_play.png" alt="" class="img-responsive" style="height:40px; width:150px;" /></a>
  <a href="#"><img src="img/amazon.png" alt="" class="img-responsive" style="height:40px; width:150px;" /></a>
</div>
<!-- end slider -->

Answer 1

我在display:table和display:table-cell的帮助下做到了这一点 这也是在移动视图中为我显示文字的最佳方式。

you can have a look at this for reference 您可以在其中看到文本没有离开图像，图像也表现为background-size:cover。它是我想展示的唯一参考。如果它有帮助你就告诉我，我很乐意知道。