Question

我不确定“覆盖”在这里是否正确。基本上，我有2列带有图像的列，并在其上设置了img-response以占据整个列，因此在较小的设备上查看时，它们会堆叠在一起。在右侧列中，我想将苹果和谷歌商店图标叠加在某个位置。但是，当我调整窗口大小以测试在不同屏幕尺寸下的外观时，这些应用商店图像不会在位置或大小上保持相对。我不是CSS方面的佼佼者，所以我肯定会丢失一些东西，但理想情况下，您希望这些应用程序商店图像定位完全相同并自行调整大小，以便所有内容都相对且看起来相同。

<div class="container">
    <!-- SAID BY SIDE IMAGES -->
    <div class="row">
        <div class="col-md-6 col-xs-12  col-sm-6" style="background-color: green; padding: 0;">
            <img class="img-responsive" style="width:100%; height:auto;" src="~/Content/Images/Middle_1.jpg" alt="">
        </div>
        <div class="col-md-6 col-xs-12 col-sm-6" style="background-color: blue; padding: 0; position: relative;">
            <img class="img-responsive" style="width:100%; height:auto;" src="~/Content/Images/Middle_2.jpg" alt="">

        <!-- THIS IMAGE NEEDS TO LOOK THE SAME IN POSITION AND RESIZE ITSELF BASED ON THE SCREEN WIDTH SO IT LOOKS THE SAME ON ANY WIDTH -->
            <img style="position: absolute; width: 120px; height: 40px; top: 300px; left: 10px;" src="~/Content/Images/Apple_App_Store_badge.jpg" />
        </div>
</div>

使用Bootstrap 3响应站点覆盖应用程序商店图像

0 个答案: