CODEWITHSUNDEEP
htmlcssresponsive-images
Vinay
Vinay

Reputation: 21

Multiple Responsive Images with same size?

How do I use multiple images which are different in resolutions.. But I want to use all in a perticular size without stretching and make everything responsive..

* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

body {
  width: 80%;
  margin: 0 auto;
}

.imags img {
  width: 45%;
  margin: 1%;
}
<section class="imags">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg" alt="wall">
  <img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&h=350" alt="wall">
  <img src="https://images.pexels.com/photos/236047/pexels-photo-236047.jpeg?auto=compress&cs=tinysrgb&h=350" alt="wall">
  <img src="https://www.nature.com/polopoly_fs/7.44180.1495028629!/image/WEB_GettyImages-494098244.jpg_gen/derivatives/landscape_630/WEB_GettyImages-494098244.jpg" alt="wall">
  <img src="https://assets.uuworld.org/sites/live-new.uuworld.org/files/styles/scaled_960_wide_no_upscale/public/istock-678573106-smaller.jpg?itok=sDKAwLhI&timestamp=1523631303" alt="wall">
</section>

Consider this example...

Upvotes: 0

Views: 2582

Answers (2)

sawacrow
sawacrow

Reputation: 321

https://codepen.io/sawacrow/pen/zYWvzQR

aspect-ratio: 2/2;

object-fit: contain; or object-fit:cover;

Upvotes: 0

Neel Debnath
Neel Debnath

Reputation: 195

You can use this code

HTML

<div class="block">
   <img class="responsive-img" src="image1.jpg" alt="image"></img>
</div>
<div class="block">
  <img class="responsive-img" src="image2.jpg" alt="image"></img>
</div>

CSS

.block {
   width: 500px;
}

.responsive-img {
   width: 100%;
   height: auto;
}

//If the screen size is less than 480px, the image width will be the width of the screen

@media screen and (min-width: 480px) {
  .block {width: 100%}
}

Here each images will adjust in 500px width and the height will varies as their height to width ratio. Or you can use Bootstrap 4, a CSS framework which have predefined classes for the same.

<div class="col-*-*">
   <img class="img-fluid" src="image1.jpg" alt="image"></img>
</div>
<div class="col-*-*">
  <img class="img-fluid" src="image2.jpg" alt="image"></img>
</div>

Here img-fluid is the class to get the responsive image in Bootstrap 4. In Bootstrap 3, the class img-responsive

If you want to fix the height also, then

.block {
  width: 500px;
  height: 500px;
  overflow: hidden;
}

.responsive-img {
  min-width: 100%;
  min-height: 100%;
}

The CSS code above will allow the images to adjust in 500px*500px box without stretching. In the result if the image width is greater than height, the height will be 500px and the width will be more than 500px, but the extra part will be hidden, vice-versa for if the height is greater than width.

Hope my answer meet to your query.

Upvotes: 2

Related Questions