How to make all images of different heights and widths the same using CSS?

Question

I am trying to create an image wall consisting of product photos. Unfortunately, they all have different heights and widths. How can I use css so that all images look the same size? preferably 100 x 100.

I was thinking of making a div that has a height and width of 100 pixels, and then some how to fill it. Not sure how to do this.

How can i do this?

Answer 1

.img { position: relative; float: left; width: 100px; height: 100px; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } 

 <div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div> <div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div> <div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div> 

Answer 2

Can I just add that if you distort your images too much, that is, remove them from the ratio, they may look wrong, the tiny amount is fine, but one way to do this is to put the images inside the 'container' and set the container to 100 x 100, then set your image to an overflow value of none and set the minimum width to the maximum width of the container, this will crop a bit of your image, although

eg

 <h4>Products</h4> <ul class="products"> <li class="crop"> <img src="ipod.jpg" alt="iPod" /> </li> </ul> .crop { height: 300px; width: 400px; overflow: hidden; } .crop img { height: auto; width: 400px; } 

Thus, the image will remain the size of its container, but will be resized without restrictions.

Answer 3

The simplest way is to keep the image size as it is, and fill another area with space, so that all images will occupy the same given space regardless of the size of the image without stretching

 .img{ width:100px; height:100px; /*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/ object-fit:scale-down; } 

Answer 4

You can use the object-fit property to determine the size of img elements:

• cover stretches or compresses the image proportionally to fill the container. If necessary, the image is cropped horizontally or vertically.
• contain stretches or compresses the image proportionally to fit inside the container.
• scale-down image image fits proportionally into the container.

 .example { margin: 1em 0; text-align: center; } .example img { width: 30vw; height: 30vw; } .example-cover img { object-fit: cover; } .example-contain img { object-fit: contain; } 

 <div class="example example-cover"> <img src="https://i.stack.imgur.com/B0EAo.png"> <img src="https://i.stack.imgur.com/iYkNH.png"> <img src="https://i.stack.imgur.com/gne9N.png"> </div> <div class="example example-contain"> <img src="https://i.stack.imgur.com/B0EAo.png"> <img src="https://i.stack.imgur.com/iYkNH.png"> <img src="https://i.stack.imgur.com/gne9N.png"> </div> 

In the above example: red is a landscape, green is a portrait, and blue is a square image. Checkered pattern consists of 16x16px squares.

Answer 5

For those who use Bootstrap and don't want to lose feedback, just don't set the width of the container. The following code is based on a gillytech post.

index.hmtl

 <div id="image_preview" class="row"> <div class='crop col-xs-12 col-sm-6 col-md-6 '> <img class="col-xs-12 col-sm-6 col-md-6" id="preview0" src='img/preview_default.jpg'/> </div> <div class="col-xs-12 col-sm-6 col-md-6"> more stuff </div> </div> <!-- end image preview --> 

style.css

 /*images with the same width*/ .crop { height: 300px; /*width: 400px;*/ overflow: hidden; } .crop img { height: auto; width: 100%; } 

OR style.css

 /*images with the same height*/ .crop { height: 300px; /*width: 400px;*/ overflow: hidden; } .crop img { height: 100%; width: auto; } 

Answer 6

You can do it as follows:

  .container{ position: relative; width: 100px; height: 100px; overflow: hidden; z-index: 1; } img{ left: 50%; position: absolute; top: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; } 

Answer 7

Set the height and width parameters in the CSS file

 .ImageStyle{ max-height: 17vw; min-height: 17vw; max-width:17vw; min-width: 17vw; } 

Answer 8

The image size does not depend on the height and width of the div,

use img element in css

Here is the css code to help you

 div img{ width: 100px; height:100px; } 

if you want to set the size using div

use this

 div { width:100px; height:100px; overflow:hidden; } 

with this code, your image will be displayed in its original size, but the first overflow of 100x100px is hidden

Answer 9

Without code, it’s hard to help you, but here are some practical tips:

I suspect your “image wall” has a kind of container with an identifier or class to style it with.

eg:

 <body> <div id="maincontainer"> <div id="header"></div> <div id="content"> <div id="imagewall"> <img src"img.jpg"> <!-- code continues --> 

Arranging the size of all images for your image wall without affecting other images, such as logo, etc., is easy if your code is set up similarly to the above.

 #imagewall img { width: 100px; height: 100px; } 

But if your images are not completely square, they will be distorted using this method.

Answer 10

Go to your CSS file and resize all your images as follows

 img { width: 100px; height: 100px; } 

Answer 11

I was looking for a solution to the same problem to create a list of logos.

I came up with this solution that uses the flexbox bit, which works for us, since we don’t worry about old browsers.

This example assumes a window size of 100x100 pixels, but I'm sure the size can be flexible / responsive.

 .img__container { display: flex; padding: 15px 12px; box-sizing: border-box; width: 100px; height: 100px; img { margin: auto; max-width: 100%; max-height: 100%; } } 

ps: you may need to add some prefixes or use autoprefixer.

Answer 12

Based on Andy Wilkinson's answer (second), I got a little better, make sure the center of the image is shown (as well as the accepted answer):

HTML:

 <div class="crop"> <img src="img.png"> </div> 

CSS

 .crop{ height: 150px; width: 200px; overflow: hidden; } .crop img{ width: 100%; height: auto; position: relative; top: 50%; -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateY(-50%); /* IE 9 */ transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */ } 

Answer 13

 .img { position: relative; float: left; width: 100px; height: 100px; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } 

 <div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div> <div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div> <div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div> 

Answer 14

 .article-img img{ height: 100%; width: 100%; position: relative; vertical-align: middle; border-style: none; } 

You will make the image size the same as the div, and you can use the loading grid to control the div size accordingly