在 Bootstrap 中使用单独的图片以及如何做出响应

Question

我正在尝试在 Bootstrap 中使用 2 张单独的图像来做出响应。我正在努力解决如何修复不同的媒体查询以设置 image.When 的确切大小我正在尝试将难以管理的中间文本用作背景请看附件Responsive image

Answer 1

好的，经过一段时间的尝试弄清楚你想要什么，我想你想要这个：

https://jsfiddle.net/leecollingsco/pbut5h2n/1/

这里设置了welcomediv是相对的，那么我们把图片放在这个div里面，就可以控制相对于容器的绝对定位了。例如，将左侧图像设置为距容器左侧 25px。这使得它更容易用于响应。

左图我已经添加了class hidden-xs，但是因为代码太多找不到合适的图片，所以你需要添加它。

这就是你想要的吗？

PS 您需要为图片提供 ALT 标签

<div class="container">
    <div class="col-md-12 welcome">
        <div class="welcomebox">
            <h1>Heading</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting only five centuries</p>
        </div>
        <img class="footer_left_img hidden-xs" src="<?php echo get_template_directory_uri(); ?>/assets/img/footer_left.png" alt="YOU NEED AN ALT TAG" />
        <img class="footer_right_img hidden-xs" src="<?php echo get_template_directory_uri(); ?>/assets/img/footer_right.png" alt="YOU NEED AN ALT TAG" />
    </div>
</div>

在 Bootstrap 中使用单独的图片以及如何做出响应

use separate Images in Bootstrap and how to make responsive

html

responsive