我想制作一张反应灵敏的横幅。请看图片。
我正在使用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 -->
答案 0 :(得分:2)
我在display:table
和display:table-cell
的帮助下做到了这一点
这也是在移动视图中为我显示文字的最佳方式。
you can have a look at this for reference
您可以在其中看到文本没有离开图像,图像也表现为background-size:cover
。它是我想展示的唯一参考。如果它有帮助你就告诉我,我很乐意知道。