How to crop/center an image inside a div without position:relative?

Question

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.

To achieve this, I need to resize the top div, instead of just shifting it. But as I resize, the image overflows the div, unless I use overflow:hidden. The problem is, overflow:hidden only works with 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?

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';
    }
}

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;
}

score 0 · Answer 1 · answered Aug 09 '17 at 00:21

0

Like so, with absolute positioning

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

answered Aug 09 '17 at 00:21

yoursweater

1,883
3
19
41

Are you able to add this to the jsfiddle example given, and make it work? I couldn't. – Rodrigo Aug 09 '17 at 00:31
Yes - the issue you're likely experiencing is that it's set to display:block and the width and height aren't being defined. If you give it some height and width specifications it will center. – yoursweater Aug 09 '17 at 00:46
Can you provide a working example or not? The problem is not only centering the image or not, but to center it and the previous idea keep working. – Rodrigo Aug 09 '17 at 00:55

score 0 · Answer 2 · answered Aug 09 '17 at 04:02

I finally managed to solve it!

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/

How to crop/center an image inside a div without position:relative?

2 Answers2