文章/答案/技术大牛

发布

问在响应的div中垂直对中
EN

Stack Overflow用户

提问于 2014-09-26 16:22:31

回答 1查看 46关注 0票数 1

我有一个背景图像，我保持它的纵横比类似于(见小提琴)：

.wrapper{
    width: 100%;
    max-width: 703px;
}

.greeting {
    background-image: url('ANIV_ARG_CELEB.jpg');
    background-repeat: no-repeat;
    background-size:contain;
    background-position:left;
    position: relative;
        min-width: 300px;
        min-height: 300px;
        width: 100%;
        padding: 34.6% 0 0 0;
}


<div class="wrapper">
     <div class="greeting texttop" style="background-image: url('top/ANIV_BOW.jpg');">
          <div class="message">
               <form action="" method="post">
                    <textarea name="text"></textarea>
                </form>
           </div>
      </div>
</div>

这很好，现在我试着在div中放置一个文本框，这样它就可以保持在所有设备上图像的顶部。

此设置在移动环境下运行良好，将文本框放置在顶部，但是随着屏幕大小的增加，文本框将变得越来越低。

也许这不能以流畅的形式进行，需要媒体查询吗？

css

responsive-design

vertical-alignment

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-09-26 16:39:13

如果我正确理解，您正在尝试将文本框移动到相对于图像位置的位置。根据窗口的垂直或水平调整，图像可以转换为景观或肖像。这是不可能的，只使用css。如果您知道图像的维数，就可以使用javascript解决这个问题。

在您的例子中，图像维数是774 X 543。因此，以下是解决这个问题的方法：

Javascript

$(function () {
    var w = 774;
    var h = 543;

    function setMessageBox() {
        var greeting = $('.greeting');
        var height = greeting.height();
        var width = greeting.width();
        console.log(height);
        if (width > (w / h) * height) {
            $('.greeting.texttop .message').css('top', '0px');
        } else {
            var vHeight = (h * width) / w;
            var topSpace = (height - vHeight) / 2;
            $('.greeting.texttop .message').css('top', topSpace.toFixed(2) + 'px');
        }
    }
    setMessageBox();
    window.onresize = setMessageBox;
});

工频

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26064063

复制

相似问题

问在响应的div中垂直对中
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在响应的div中垂直对中EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在响应的div中垂直对中
EN