位置なしでdiv内の画像を切り抜く/中央に揃える方法：相対？

続きを読むthis example、私はページがスクロールされるように、イメージの中心が常にそれに現れるように、一番上のdivにイメージを集中させたいと思います。位置なしでdiv内の画像を切り抜く/中央に揃える方法：相対？

これを達成するには、単にdivを移動するのではなく、一番上のdivのサイズを変更する必要があります。しかし、サイズを変更すると、オーバーフロー：hiddenを使用しない限り、イメージはdivをオーバーフローさせます。問題はオーバーフローです：隠されたonly works位置：相対。しかし、これはレイアウト全体を破壊します。

画像を上部divに中央に配置しても、どのようにしてhereのようにスクロールさせることができますか？

HTML

<body onscroll='scroll(event)'> 
    <div class='top' id='top'><img src='http://www.vejanomapa.net.br/wp-content/uploads/2013/03/Maria-Fuma%C3%A7a-em-Tiradentes-MG.jpg'></div> 
    <div class='bottom' id='bottom'> 
    <div class='menu'>Menu</div> 
    <div class='main'><img src='http://tvulavras.com.br/wp-content/uploads/2017/04/maria-fuma%C3%A7a.jpg'></div> 
    </div> 
</body>

はJavaScript

function scroll(e) { 
    var T = document.getElementById('top'); 
    var B = document.getElementById('bottom'); 
    var imgH = T.clientHeight; // header image height 
    var hH = 200; // fixed header height 
    if (imgH-e.pageY > hH) { // image is scrolling 
    T.classList.remove('active') 
     T.style.top = '-'+e.pageY+'px'; 

     T.style.position = 'sticky'; 
    B.style['margin-top'] = '0'; 
    } else { // image should remain fixed 
    T.classList.add('active') 
     T.style.top = '-'+(imgH-hH)+'px'; 
    } 
}

ので、同様

html, body { 
    margin:0; 
} 
body { 
    overflow-y:scroll; 
    overflow-x:hidden; 
} 
img { 
    display:block; 
} 

.top { 
    background:#FCC; 
    display:block; 
    top:0; 
    position: sticky; 
} 

.active{ 
    position: fixed; 
} 

.active ~ .bottom { 
    margin-top: 386px; 
    padding-left: 100px; 
} 

.active ~ .bottom .menu { 
    position: fixed; 
    top: 200px; 
    bottom: 0; 
    left: 0; 
} 

.bottom { 
    display:flex; 
    min-height:1500px; 
    background:#CFC; 
} 
.menu { 
    min-width:100px; 
    background:#CCF; 
}

出典

2017-08-09 Rodrigo

、CSS絶対位置と

.yourElementGoesHere { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
}

出典

2017-08-09 00:21:03 yoursweater

はあなたが与えられたjsfiddle例にこれを追加することができますし、それを動作させます？私はできませんでした。 – Rodrigo

はい - 発生する可能性が高い問題は、表示：ブロックに設定されており、幅と高さが定義されていないことです。高さと幅の仕様をいくつか指定すると、中央に配置されます。 – yoursweater

実例を提供することはできますか？この問題はイメージのセンタリングであるかどうかではなく、センタリングと以前のアイデアが引き続き機能することです。 – Rodrigo

私はついにそれを解決しました！

HTML

<body onscroll='scroll(event)'> 
    <div class='top' id='top'><img id='imgTop' src='http://www.vejanomapa.net.br/wp-content/uploads/2013/03/Maria-Fuma%C3%A7a-em-Tiradentes-MG.jpg'></div> 
    <div class='bottom' id='bottom'> 
    <div class='menu' id='menu'>Menu</div> 
    <div class='main' id='main'><img src='http://tvulavras.com.br/wp-content/uploads/2017/04/maria-fuma%C3%A7a.jpg'></div> 
    </div> 
</body>

はJavaScript

function scroll(e) { 
    var T = document.getElementById('top'); 
    var B = document.getElementById('bottom'); 
    var M = document.getElementById('menu'); 
    var A = document.getElementById('main'); 
    var I = document.getElementById('imgTop'); 
    var imgH = T.clientHeight; // header image height 
    var hH = 100; // fixed header height 
    if (imgH-e.pageY > hH) { // scrolling 
     T.style.top = '-'+e.pageY+'px'; 
     I.style.top = (e.pageY/2)+'px'; 
     A.style.paddingLeft = 0; 
     B.style.marginTop = 0; 
     M.style.position = 'sticky'; 
    } else { // fixed 
     T.style.top = '-'+(imgH-hH)+'px'; 
     A.style.paddingLeft = '100px'; 
     M.style.position = 'fixed'; 
     M.style.top = hH+'px'; 
     M.style.bottom = 0; 
    } 
}

CSS

html, body { 
    margin:0; 
} 
body { 
    overflow-y:scroll; 
    overflow-x:hidden; 
} 
#imgTop { 
    display:block; 
    position:relative; 
} 
.top { 
    background:#FCC; 
    display:block; 
    top:0; 
    position: sticky; 
    overflow:hidden; 
} 
.bottom { 
    display:flex; 
    background:#CFC; 
} 
.menu { 
    min-width:100px; 
    background:#CCF; 
}

JSFiddle：https://jsfiddle.net/aor0abhf/3/

出典

2017-08-09 04:02:37 Rodrigo

位置なしでdiv内の画像を切り抜く/中央に揃える方法：相対？

答えて

関連する問題