垂直居中的东西在响应的div

我有我维持其长宽比像这样（see fiddle）背景图片：垂直居中的东西在响应的div

.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，以便它停留在所有设备上图像的顶部。

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

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

来源

2014-09-26 BenRacicot

我只是不明白你之后在做什么，小提琴看起来并不正确，甚至如果你用文本输入替换textarea。 – 2014-09-26 17:55:06

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

来源

2014-09-26 16:39:13

然后宽高比关闭......也许我应该使用具有边框的图像来显示其边框。 – BenRacicot 2014-09-26 16:43:14

@ BenRacicot是的，我现在明白了..你的帖子不清楚。我会在这里尝试。 – 2014-09-26 16:48:39

我更新了图像，如果不清楚的话。 – BenRacicot 2014-09-26 16:59:16

垂直居中的东西在响应的div

回答

相关问题