CODEWITHSUNDEEP
htmlcss
Jacob Moore
Jacob Moore

Reputation: 277

Two column layout, different height images

I'm trying to make a layout with two columns. On the left side is one image, and on the right side the image should be half the height of the image on the left but still take up the full width of the screen. I cant seem to make the image on the right side 50% of the height of the one on the left. The margin on the top is to clear space for a fixed header. 

.col {
  margin-top: 80px;
  width: 100%;
  float: left;
}

.row-l {
  width: 60%;
}

.row-r {
  width: 39.5%;
  height: 50%;
}
<div class="col">
  <img class="row-l" src="cover.jpg" style="max-width: 100%;">
  <img class="row-r" src="phone.jpg" style="max-width: 100%;">
</div>

Upvotes: 0

Views: 192

Answers (1)

Temani Afif
Temani Afif

Reputation: 273512

I advice you to go with a flex layout and use the images as a background like this:

* {
  box-sizing: border-box;
}

.col {
  margin-top: 80px;
  display: flex;
  height: 40vh;
  border: 1px solid;
}

.row-l {
  width:60%;
  background-size: cover;
  background-image:url("https://lorempixel.com/400/400/");
}

.row-r {
  width:40%;
  background-size: cover;
  background-image:url("https://lorempixel.com/400/500/");
  height:50%;
  margin-top:auto;
}
<div class="col">
  <div class="row-l" ></div>
  <div class="row-r"></div>
</div>

Upvotes: 1

Related Questions