響應頭寬度兩個重疊的圖像

Question

我正在創建帶有兩個重疊圖像的響應式標題。 根據當前鼠標位置，div可以更大或更小。 問題是創建響應此標頭。 兩張圖片的中心應位於網頁的中心。 由於包含圖像的div不在文檔中心，因此很難實現。 您可以在此處查看我當前的進度。 只要瀏覽器的像素為1200像素左右，它看起來就很好（圖像寬度為1280像素）。 但是，當我將瀏覽器調整為較小的尺寸時，其效果並非如此。

HTML

<div class="header">
<div class="headerleft"><img src="images/rick.png" width="1280" height="200" id="rick" alt="rick" align="middle"></div>
<div class="headerright"><img src="images/peter.png" width="1280" height="200" id="peter" alt="peter" align="right"></div>
</div>

CSS

    .header{
        height: 200px;
        width: 100%;
        background-size: 50%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .headerleft{
        background-color: red;
        width: 100%;
        height: 100%;
        float: left;
        margin: 0;
        padding: 0;
        overflow:hidden;
        background-image: url('images/rick.png');
        background-position: left;
    }

    .headerright{
        background-color: blue;
        width: 50%;
        height: 100%;
        float: right;
        margin: 0;
        padding: 0;
        overflow:hidden;
        /*background-image: url('images/peter.png');*/
        background-position: right;
    }

使用Javascript

$(document).on('mousemove', function(e){
    page = $( document ).width();
    pagecrop = page/2;  
    $('.headerright').css({
       width:  e.pageX/2+pagecrop/2,
    });
    });

    $(document).on('mousemove', function(e){
    page = $( document ).width();
    pagecrop = page/2;
    $('.headerleft').css({
       width:  pagecrop-e.pageX/2+pagecrop/2,
    });
    });

Answer 1

使它與CSS transform轉換屬性一起使用，並使用jquery更改該值。 謝謝docodemore！

$(document).ready(function() { 
    var $winwidth = $(window).width();
    var width2 = 1280-$winwidth
    var width3 = width2/2
        $('#peter').css('transform', 'translate(' + width3  + 'px)');
        $('#rick').css('transform', 'translate(-' + width3  + 'px)');
    $(window).bind("resize", function(){ 
        var $winwidth = $(window).width();
        var width2 = 1280-$winwidth
        var width3 = width2/2
            $('#peter').css('transform', 'translate(' + width3 + 'px)');
            $('#rick').css('transform', 'translate(-' + width3  + 'px)');
    });
});

Answer 2

您是否嘗試過刪除HTML中圖像的固定像素大小並替換為CSS或將1280px值更改為100％，例如：

<div class="header">
<div class="headerleft"><img src="images/rick.png" width="100%" height="200" id="rick" alt="rick"  align="middle"></div>
<div class="headerright"><img src="images/peter.png" width="100%" height="200" id="peter" alt="peter" align="right"></div>
</div>

不確定這是否是您想要的效果，但值得一試嗎？