在响应式 div 中垂直居中

Question

我有一个背景图像，我保持它的纵横比像这样 (see fiddle)：

.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 中放置一个文本框，这样它才能在所有设备上保持在图像的顶部，这才有效。

此设置适用于移动设备，将文本框置于顶部，但随着屏幕尺寸的增大，文本框会变得越来越低。

也许这不能以流畅的形式完成，需要媒体查询？

Answer 1

如果我理解正确，您正在尝试相对于图像位置移动文本框。根据窗口的垂直或水平调整大小，可以将图像转换为横向或纵向。仅使用 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;
});

Working Fiddle