制作响应式网页

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

不太确定您的问题到底是什么。您想要文本 and/or 图像 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>

制作响应式网页

Making a responsive web page

css

responsive