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

在响应式div中垂直居中

1 个答案: