在响应div中垂直居中

debugcn 发表于 Dev

本·拉西科特（Ben Racicot）

我有一个背景图像，我正在像这样保持其长宽比（请参阅小提琴）：

.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不可能做到这一点。如果您知道图像的尺寸，则可以使用javascript解决。

在您的情况下，图像尺寸为774 X 543。因此，这是解决方案：

Java脚本

$(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;
});

工作小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。