Cover page with 4 images of different sizes?

Question

I posted a question yesterday and someone suggested a similar question with answers that doesn't solve this, yet my question was closed. So here i am, asking again with a bit more explanation.

I want it to cover the whole width of the page but with a height of 590px.

How do i achieve this? If possible a code snippet of how exactly to do this.

Using Bootstrap 4.4

This is how i want it;

Here is a code snippet;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="row no-gutters">
        <div class="tile col-lg-6">
            <img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" class="img-fluid" alt="Responsive image" style="opacity: 1;">
        </div>

        <div class="tile col-lg-6">
            <img class="lazy" src="https://image.freepik.com/free-photo/fiery-orange-sunset-sky-warm-light-with-clouds-beautiful-background_9511-97.jpg" class="img-fluid" alt="Responsive image" style="opacity: 1;">

            <div class="row no-gutters">
                <div class="tile col-lg-6">
                    <img src="https://img5.goodfon.com/wallpaper/nbig/5/60/4k-ultra-hd-background-sunset-dark-twilight-sky-clouds-natur.jpg" class="img-fluid" alt="Responsive image" style="opacity: 1;">
                </div>

                <div class="tile col-lg-6">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/5/58/Sunset_2007-1.jpg" class="img-fluid" alt="Responsive image" style="opacity: 1;">
                </div>
            </div>
        </div>
    </div>

You are very close, what about the original ratio of your images, do you want to stretch them or cut parts of them off if the ratio is not fine ? simple example, not like you want but to clarify my comment/question https://codepen.io/gc-nomade/pen/yLNPaog — G-Cyrillus, Mar 06 '20 at 18:02
@G-Cyrillus Okay, so example is this https://www.crit-research.it/it/ after the cover image AND this page (https://www.airbnb.com/rooms/1202709?source_impression_id=p3_1583366603_9NERRJttXbwrwwdW) . Please open on large screen. — Maxxx, Mar 06 '20 at 18:20
I want to maintain their original state but in smaller sizes. — Maxxx, Mar 06 '20 at 18:23
okay , your image have to come in four sizes , a big one, a smaller one half of height and last 2 half of height and width, then it should work itself with width:100% for the first 2 , then 50% for the last two. Images of size not matching these will require to relay on flex behavior and object-fit, while float:left would do the job (on the first 2 bigger) if the ratios fit together. — G-Cyrillus, Mar 06 '20 at 18:37
you could use a masonry layout or you could use the newfangled css grids — Dev Man, Mar 09 '20 at 21:40

rx2347 · Answer 1 · 2020-03-09T21:54:07.390

This is how you could achieve something like the shown picture with CSS-Grid.

All you do is setup the grid and its measurements (done in #grid) and then give every child a grid-column-start and grid-row-start number (first number in grid-column and grid-row) and a grid-column-end and and grid-row-end (last number). And the rest is magic.

(in CSS-Grid its actually not called row and column numbers, you are referencing the Grid-Lines, which you can easily make visible in Chrome or Firefox Dev Tools.)

You can read more on Line-based placement in CSS-Grid here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid

To add images to this, simply place them as background images likes this in the image containers:

background-image: url(yourimage.jpg);
background-size:cover;

And thats it. Pretty cool stuff, if you ask me. Everyone should have a look into CSS-Grid.

#grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 60px repeat(4, 1fr);
  width: 100vw;
  height: 590px;
}

#navbar {
  background: blue;
  grid-column: 1 / 5;
  grid-row: 1 / 1;
}

#image1 {
  background: cyan;
  grid-column: 1 / 3;
  grid-row: 2 / 6;
}

#image2 {
  background: orange;
  grid-column: 3 / 5;
  grid-row: 2 / 4;
}

#image3 {
  background: magenta;
  grid-column: 3 / 4;
  grid-row: 4 / 6;
}

#image4 {
  background: brown;
  grid-column: 4 / 5;
  grid-row: 4 / 6;
}

<div id="grid">
  <div id='navbar'></div>
  <div id="image1"></div>
  <div id="image2"></div>
  <div id="image3"></div>
  <div id="image4"></div>
</div>

Cover page with 4 images of different sizes?

1 Answers1