0

I have a few different images and I need to make them match in dimensions across a row in my website. There's three images and I want them to take up an equal amount of space across that row. Unfortunately, each image has drastically different sizes, how would I go about making them match with CSS? Or would I need to get into JavaScript for that?

AutumnSail
  • 63
  • 1
  • 1
  • 7
  • 1
    You could put them in equally sized divs and use css background-image : url(); background-size: contain; or cover whichever works best – sheavens May 30 '18 at 19:18
  • Possible duplicate of [How can I make all images of different height and width the same via CSS?](https://stackoverflow.com/questions/19414856/how-can-i-make-all-images-of-different-height-and-width-the-same-via-css) – Heretic Monkey May 30 '18 at 19:29

2 Answers2

2

Use background-size: cover and place each image as the background of an element. You can use flex or a grid to position the containers horizontally. The float is just for demonstration purposes.

https://jsfiddle.net/170q0vwL/

.image {
  float: left;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 200px;
  height: 120px;
}

.bg1 {
  background-image: url(http://www.sftravel.com/sites/sftraveldev.prod.acquia-sites.com/files/styles/sft_390x675_dark/public/alternative-portraits/Skyline-San-Francisco-at-Dusk_2.jpg?itok=FTSuT4Sf&timestamp=1515701696);
}

.bg2 {
  background-image: url(https://lonelyplanetimages.imgix.net/a/g/hi/t/9cf024dfd5c0bcb2b17f4785340145ea-san-francisco.jpg?sharp=10&vib=20&w=2000);
}

.bg3 {
  background-image: url(http://static4.uk.businessinsider.com/image/5ac39fa97708e9798137d136-1000/shutterstock566076799.jpg);
}
<div class="row">
  <div class="image bg1">
  
  </div>
  <div class="image bg2">
  
  </div>
  <div class="image bg3">
  
  </div>
</div>
Dan H
  • 3,524
  • 3
  • 35
  • 46
0

You can alter the height/width images occupy on the screen forcefully, but you can't change their aspect ratios with CSS, I'm afraid.

To make them actually fit the exact same space neatly, you'd have to cut thumbnails with fixed dimensions (height/width) from their middle and place them in your site instead of the original images.

Tiramonium
  • 557
  • 5
  • 15