height of multiple images css

Question

is it possible to have 2 different images in one line and scale them exactly the same? Lets say i have something like this:

.container {
  max-width:1200px;
  margin:0 auto;
  overflow:hidden
}

.left {
  float:left
  width:70%;
}

.right {
  width:30%
  float:right;
}

<div class='container'>
  <div class='left'>
    img here
  </div>
  <div class='right'>
    img here
  </div>
</div>

Now I'd like to fit images with container's width. Then when decreasing the size of the browser i want to scale em both with the same height. Can i achive that? I'm thinking about something like this: http://prntscr.com/h0j2lj

score 0 · Answer 1 · answered Oct 22 '17 at 14:55

It is not quite clear from your description what effect you're trying to achieve, so this example may not be relevant with your actual task. Piece of code blow displays to images one by one with 70/30 ratio and scales them. Images are put on background so they may not be completely visible in every layout.

.container {
  max-width:1200px;
  margin:0 auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.left, .right {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 200px;
}

.left {
  flex: 7 7 70%;
}

.right {
  flex: 3 3 30%;
}

<div class='container'>
  <div class='left' style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/4d/Bees_Collecting_Pollen_cropped.jpg)">
  </div>
  <div class='right' style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5d/Crateva_religiosa.jpg)">
  </div>
</div>

That's the result that I want but can I do this with img tag? — ProgAps, Oct 22 '17 at 14:58
Most likely not because, as you can see, element's aspect ratios changes while resizing browser's window and `` tag can't do it. So background solution is better in this case — Flying, Oct 22 '17 at 15:02
Of course if you have images that by themselves are of same height and have 70 / 30 size percentage (so they fit into your layout perfectly) - it is possible to do such layout with `` by using flexbox. But in a general case it is not possible. — Flying, Oct 22 '17 at 15:04

score 0 · Answer 2 · answered Oct 22 '17 at 15:05

This shows the same image scaled for 70% on the left and 30% on the right.

.container {
  max-width:1200px;
  margin:0 auto;
  overflow:hidden
}

.left {
  float:left;
  width:70%;
}

.left img{
  width: 100%;
}

.right {
  width:30%;
  float:left;
}

.right img{
  width:100%;
}

<div class='container'>
  <div class='left'>
    <img src="https://www.google.com.ar/logos/doodles/2017/argentina-elections-2017-5640194106589184-l.png"/>
  </div>
  <div class='right'>
    <img src="https://www.google.com.ar/logos/doodles/2017/argentina-elections-2017-5640194106589184-l.png"/>
  </div>
</div>

height of multiple images css

2 Answers2