css - 我想制作响应式横幅

Question

我想制作响应式横幅。请看图片。

我正在使用 Bootstrap 。当我在移动屏幕上看到它时，文本和底部图像应该相应缩放。谁能帮我实现它？所有的图像、文本都应该是响应式的并相应地缩放。问候。

编辑

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

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

这是我的 slider 的代码。另外我希望底部的 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 的帮助下做那件事这也是在移动 View 中为我显示文本的最佳方式。

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