How to Make All Images of Different Height and Width the Same Via CSS

How can I make all images of different height and width the same via CSS?

Updated answer (No IE11 support)

img {    float: left;    width:  100px;    height: 100px;    object-fit: cover;}

<img src="http://i.imgur.com/tI5jq2c.jpg"><img src="http://i.imgur.com/37w80TG.jpg"><img src="http://i.imgur.com/B1MCOtx.jpg">

How do I make all images of similar size?

Not sure if I understood the question correctly, but take a look of this as follows.

.photo {    text-align: center; /*for centering images inside*/}.photo img {    width: 300px; /*set the width or max-width*/    height: auto; /*this makes sure to maintain the aspect ratio*/}

<div class="photo">    <img src="http://dummyimage.com/600x200"/>    <br/>    <img src="http://dummyimage.com/500x200"/></div>

Image height same as width

Many of us had given you some hints in the comments, so by now you should be able to create a responsive square.

Fit the image inside the square
Just in case you are missing the last part, here is how you can fit the image (with any aspect ratio) into that square. It also means that your image will be cropped if it's not squared.

Snippet:

.container {
  position: relative;
  width: 37%; /* The size you want */
}
.container:after {
  content: "";
  display: block;
  padding-bottom: 100%; /* The padding depends on the width, not on the height, so with a padding-bottom of 100% you will get a square */
}

.container img {
  position: absolute; /* Take your picture out of the flow */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; /* Make the picture taking the size of it's parent */
  width: 100%; /* This if for the object-fit */
  height: 100%; /* This if for the object-fit */
  object-fit: cover; /* Equivalent of the background-size: cover; of a background-image */
  object-position: center;
}

<div class="container">
  <img src="https://images.pexels.com/photos/1249588/pexels-photo-1249588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/>
</div>

How to Make All Images of Different Height and Width the Same Via CSS

How can I make all images of different height and width the same via CSS?

How do I make all images of similar size?

Image height same as width

Related Topics

Leave a reply