Question

我正在处理响应式网络。我的图像在该图像前面有内容。但是，当我缩小或放大到最大宽度时，我发现内容（在这种情况下是文本）没有放在第一个位置。

您是否知道如何让网络更具响应性？我的意思是响应在这里是我们放大还是缩小，位置将是相同的，但大小可能会改变。

任何想法都将受到赞赏。十分感谢！ *我已经在使用bootstrap

这里是代码示例：

<div class="image-one">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" style="padding:5px"/>
        <h2 style="vertical-align:middle;margin-left:150px;margin-top:-150px;position:absolute;color:#ff0000">Kuta</h2>
</div>

Answer 1

不确定我是否知道你在问什么，但看看这个是否有更灵敏的结构：

    <div class="image-one" style="position: relative;display: inline-block;">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" style=" max-width:100%; ">
        <h2 style="vertical-align:middle;left: 31.5%;top: 50%;position:absolute;color:#ff0000;">Kuta</h2>
    </div>

Answer 2

不完全确定您的问题是什么。你想要文字和/或图像rezie？也许这会对你有所帮助：

<div class="image-one" style="background-image:url('http://sachinchoolur.github.io/lightslider/img/cS-1.jpg');background-size: contain;background-repeat: no-repeat;  position: relative;width: 100%;height: 100%;">
        <div class="centered_text" style="position: absolute;top: 50%; left: 50%;transform: translate(-50%,-50%);">
            <h2 style="color:#ff0000">Kuta</h2>
        </div>
</div>

制作响应式网页

2 个答案: