垂直居中的東西在響應的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