Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Extra div causing the image height not scaling properly (display: flex)

I took the code from here. The code is working well but when I added an extra div to wrap the div with class fullwidth, the images height does not scale equally depending on the height of the screen.

This is how it looks originally:

body,
html {
  height: 100%;
}

.fullwidth {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.repeat-x {
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.bg-1 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

.bg-2 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

.bg-3 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}
<div class="fullwidth">
  <div class="repeat-x bg-1">&nbsp;</div>
  <div class="repeat-x bg-2">&nbsp;</div>
  <div class="repeat-x bg-3">&nbsp;</div>
</div>

After wrapping fullwidth with another div :-

body,
html {
  height: 100%;
}

.fullwidth {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.repeat-x {
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.bg-1 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

.bg-2 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

.bg-3 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}
<div id="newid">
  <div class="fullwidth">
    <div class="repeat-x bg-1">&nbsp;</div>
    <div class="repeat-x bg-2">&nbsp;</div>
    <div class="repeat-x bg-3">&nbsp;</div>
  </div>
</div>
like image 790
Evelyn Avatar asked Aug 15 '17 07:08

Evelyn


People also ask

Does Flex Shrink work on images?

You can easily shrink an image by using the flex-wrap property in CSS and it specifies whether flex items are forced into a single line or wrapped onto multiple lines.

Does Flex work on images?

However, with flexbox, the images are fully responsive—you can test it by resizing the browser window. Another advantage is that now the images (flex items) can be easily positioned in different ways (we'll see how to do it below).


2 Answers

You can choose one of these to enlarge the #newid to the whole height of the current viewport:

#newid {
  height: 100vh; /* this is how you do it in 2017 */
  height: 100%;
}

For reference: I can highly recommend this post if you wan to dive deeper into css units: CSS Units - What is the difference between vh/vw and %?

like image 199
Gerrit Halfmann Avatar answered Nov 09 '22 19:11

Gerrit Halfmann


Add height: 100% to the newid container - this allows the flexbox to inherit the height of the document.

See demo below:

body,
html {
  height: 100%;
}

#newid {
  height: 100%;
}

.fullwidth {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.repeat-x {
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.bg-1 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

.bg-2 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

.bg-3 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}
<div id="newid">
  <div class="fullwidth">
    <div class="repeat-x bg-1">&nbsp;</div>
    <div class="repeat-x bg-2">&nbsp;</div>
    <div class="repeat-x bg-3">&nbsp;</div>
  </div>
</div>
like image 34
kukkuz Avatar answered Nov 09 '22 19:11

kukkuz