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

Question

I am trying to create an image wall consisting of product photos   Unfortunately  all of them are of different height and width   How can I use css to make all images look the same size  preferably 100 x 100     I was thinking of doing a div that has height and width of 100px and then some how filling it up   NOt sure how to do that     How can I accomplish this

User · Answer

You can do it this way     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

User · Answer

You can use the object-fit property to size the img elements    cover stretches or shrinks the image proportionally to fill the container  The image is cropped horizontally -or- vertically if necessary  contain stretches or shrinks the image proportionally to fit inside the container  scale-down shrinks the image proportionally to fit inside the container     x000D   x000D   example   x000D    margin  1em 0  x000D    text-align  center  x000D    x000D   x000D   example img   x000D    width  30vw  x000D    height  30vw  x000D    x000D   x000D   example-cover img   x000D    object-fit  cover  x000D    x000D   x000D   example-contain img   x000D    object-fit  contain  x000D    x000D   lt div class  example example-cover  gt  x000D     lt img src  https   i stack imgur com B0EAo png  gt  x000D     lt img src  https   i stack imgur com iYkNH png  gt  x000D     lt img src  https   i stack imgur com gne9N png  gt  x000D   lt  div gt  x000D   x000D   lt div class  example example-contain  gt  x000D     lt img src  https   i stack imgur com B0EAo png  gt  x000D     lt img src  https   i stack imgur com iYkNH png  gt  x000D     lt img src  https   i stack imgur com gne9N png  gt  x000D   lt  div gt  x000D   x000D   x000D    In the above example  red is landscape  green is portrait and blue is square image  The checkered pattern consists of 16x16px squares

User · Answer

I was looking for a solution for this same problem  to create a list of logos   I came up with this solution that uses a bit of flexbox  which works for us since we re not worried about old browsers   This example assumes a 100x100px box but I m pretty sure the size could 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

User · Answer

Updated answer  No IE11 support   x000D   x000D  img   x000D      float  left  x000D      width   100px  x000D      height  100px  x000D      object-fit  cover  x000D    x000D   lt img src  http   i imgur com tI5jq2c jpg  gt  x000D   lt img src  http   i imgur com 37w80TG jpg  gt  x000D   lt img src  http   i imgur com B1MCOtx jpg  gt  x000D   x000D   x000D    Original answer  x000D   x000D   img   x000D      float  left  x000D      width   100px  x000D      height  100px  x000D      background-size  cover  x000D    x000D   lt div class  img  style  background-image url  http   i imgur com tI5jq2c jpg     gt  lt  div gt  x000D   lt div class  img  style  background-image url  http   i imgur com 37w80TG jpg     gt  lt  div gt  x000D   lt div class  img  style  background-image url  http   i imgur com B1MCOtx jpg     gt  lt  div gt  x000D   x000D   x000D

User · Answer

Based on Andi Wilkinson s answer  the second one   I improved a  little  make sure the center of the image is shown  like the accepted answer did    HTML    lt div class  crop  gt      lt img src  img png  gt   lt  div gt    CSS    crop    height  150px    width  200px    overflow  hidden     crop img    width  100     height  auto    position  relative    top  50     -webkit-transform  translateY -50       Ch  lt 36  Saf 5 1   iOS  lt  9 2  An   lt 4 4 4      -ms-transform  translateY -50       IE 9      transform  translateY -50       IE 10  Fx 16   Op 12 1

User · Answer

article-img img       height  100       width  100       position  relative      vertical-align  middle      border-style  none       You will make images size same as div and you can use bootstrap grid to manipulate div size accordingly

User · Answer

Go to your CSS file and resize all your images as follows  img     width   100px    height  100px

User · Answer

can i just throw in that if you distort your images too much  ie take them out of a ratio  they may not look right  - a tiny amount is fine  but one way to do this is put the images inside a  container  and set the container to the 100 x 100  then set your image to overflow none  and  set the smallest width to the maximum width of the container  this will crop a bit of your image though    for example    lt h4 gt Products lt  h4 gt   lt ul class  products  gt       lt li class  crop  gt           lt img src  ipod jpg  alt  iPod    gt       lt  li gt   lt  ul gt      crop    height  300px   width  400px   overflow  hidden     crop img    height  auto   width  400px      This way the image will stay the size of its container  but will resize without breaking constraints

User · Answer

Image size is not depend on div height and width   use img element in css  Here is css code that help you  div img           width  100px           height 100px       if you want to set size by div  use this  div       width 100px      height 100px      overflow hidden      by this code your image show in original size but  show first 100x100px overflow will hide

User · Answer

Set height and width parameters in CSS file   x000D   x000D   ImageStyle  x000D   x000D      max-height  17vw  x000D      min-height  17vw  x000D      max-width 17vw  x000D      min-width  17vw  x000D       x000D    x000D   x000D   x000D

User · Answer

Simplest way - This will keep the image size as it is and fill the other area with space  this way all the images will take same specified space regardless of the image size 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

User · Answer

Without code this is difficult to help you but here s some practical advice for you   I suspect that your  image wall  has some sort of container with an id or class to give it styles   eg    lt body gt    lt div id  maincontainer  gt     lt div id  header  gt  lt  div gt      lt div id  content  gt       lt div id  imagewall  gt         lt img src img jpg  gt   lt  -- code continues -- gt    Styling a size on all images for your image wall  while not affecting other images  like you logo  etc  is easy if your code is set up similar to the above    imagewall img     width  100px    height  100px      But if your images are not perfectly square they will be skewed using this method

User · Answer

For those using Bootstrap and not wanting to lose the responsivness just do not set the width of the container  The following code is based on gillytech post   index hmtl   lt div id  image preview  class  row  gt         lt div class  crop col-xs-12 col-sm-6 col-md-6   gt            lt img class  col-xs-12 col-sm-6 col-md-6             id  preview0  src  img preview default jpg   gt       lt  div gt       lt div class  col-xs-12 col-sm-6 col-md-6  gt           more stuff      lt  div gt    lt  div gt   lt  -- end image preview -- gt    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

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

Examples related to html

Examples related to image

Examples related to css

Examples related to resize