如何在没有position：relative的div中裁剪/居中图像？
[英]How to crop/center an image inside a div without position:relative?
问题描述
Continuing this example , I want to centralize the image in the top div, so that, as the page is scrolled, the center of the image always appear on it. 
继续本示例 ，我想将图像集中在顶部div中，以便在滚动页面时，图像的中心始终显示在其上。
To achieve this, I need to resize the top div, instead of just shifting it. 为此，我需要调整顶级div的大小，而不是仅仅改变它的大小。 But as I resize, the image overflows the div, unless I use overflow:hidden. 但是当我调整大小时，除非我使用overflow：hidden，否则图像会溢出div。 The problem is, overflow:hidden only works with position:relative. 问题是，overflow：hidden 仅适用于position：relative。 But this breaks the whole layout. 但这破坏了整个布局。
How can I center the image in the top div and still have it scrolling like here ? 如何在顶部div中居中图像，并且仍然像此处一样滚动？
HTML 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 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';
}
}
CSS CSS
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;
}
2 个解决方案
解决方案1
0 2017-08-09 00:21:03
Like so, with absolute positioning 这样，绝对定位
.yourElementGoesHere {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
解决方案2
0 2017-08-09 04:02:37
I finally managed to solve it! 我终于设法解决了！
HTML 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 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 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/ JSFiddle： https ：//jsfiddle.net/aor0abhf/3/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.