How to position 3 images using HTML and CSS in the following way?

Question

I am looking for the simplest method, to position three images in the following way using CSS and HTML

Image number 2 and 3 should be of 50% width and height of image number 1.

Thank you in advance

user_15335954 · Answer

You can use a grid to do so

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  grid-gap: 4px;
}

img {
  max-width: 100%;
}

img:first-child {
  max-width: unset;
  height: 100%;
  width: 100%;
  object-fit: cover;
  grid-row: span 2;
}

user_9023368 · Answer

.container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100px;
  width: 100px;
}
#img1{
    grid-row: 1/3;
    grid-column: 1/2;
    border: red solid 1px;
  }
#img2{
  border: blue solid 1px;
}

#img3{
  border: green solid 1px;
}

user_5526624 · Answer

I would honestly go with Charles Lavalard's grid solution above, but wanted to show a flex solution that takes in that the images may not fit the designated space.

html, body {
  margin: 0px;
}

.container {
  display: flex; /* display side by side */
  align-items: stretch;  /* stretches the .right div */
}

.container img {
  object-fit: cover; /* clips image if it's too big */
}

.left, .right {
  flex: 1 1 auto; /* fills out the width */
  flex-basis: 50%;
}

.right {
  display: flex;
  flex-direction: column;
}

.small {
  flex: 1 1 auto; /* fills out the height */
}

user_14320991 · Answer

There are numerous ways to do this, but i think flex box is the right approach if you want to further align the text inside one of the divs.

A simple method will be to use 3 child divs and wrap it around 2 parent divs and finally 1 grandparent div. Use flex box with direction row on the grandparent div content. Then specify on col2 to be flex-direction column.

.content {
  display: flex;
  flex-direction: row;
}

.col2 {
  display: flex;
  flex-direction: column;
}

.first {
  background-color: red;
  height: 100vh;
  width: 50vw;
}

.second {
  background-color: green;
  height: 50vh;
  width: 50vw;
}

.third {
  background-color: yellow;
  height: 50vh;
  width: 50vw;
}


  
    lst
  
  
    2nd
    third

user_13613400 · Answer

img {
height:300px;
width:150px;
border:1px solid white
}
.rows {
display:flex;
flex-direction:column;
}
.container {
display:flex;
flex-direction:row;
}
.rows img{
height:150px;
width: 75px;}

How to position 3 images using HTML and CSS in the following way?

5 Answers