Question

我有一个容器div，用ratio集覆盖屏幕。

我想放置一些absolute位置的元素并做出响应（缩小或向上）。

我有类似

的东西

当我缩小浏览器的width或height时。元素位置将改变并注视。任何人都可以帮我吗？

Answer 1

同样，这可能不是最佳解决方案。至少可以部分使用CSS，使高光图像居中，或使用％宽度。如果你能以某种方式使包含DIV的背景图像成为平方，那么你只能用CSS来做。这是带有jquery解决方案的Fiddle。

$( document ).ready(function() {
    function update(){
        var top=20,left=40;
        var height = $(window).height();
        var width = $(window).width();
        var highlights = $('#cover-img img');
        if (height > width){
            // Image limited by width
            var blank_top = Math.round((height - width)/2);        
            highlights.css('top',blank_top+top);
            highlights.css('left',left);
            // make it responsive 1/3 ratio 
            highlights.width(Math.round(width/3));      
        }else{
            // Image limited by height
            var blank_left = Math.round((width - height)/2);        
            highlights.css('left',blank_left+left);
            highlights.css('top',top);        
            highlights.width(Math.round(height/3));
        }
    }
    $( window ).resize(update);

    update();
)};

希望这有帮助

如何在我的案例中设置元素的绝对位置？

1 个答案: