Changing image sizes proportionally using CSS

Question

I have been trying for a couple of days now to configure my thumbnail gallery so all the images appear the same height and width  However when I change the Css code to    max-height  150px  max-width  200px  width  120px  height  120px    I get images that are all the same size but the aspect ratio is stretched ruining the images  is there not a way to resize the image container and not the image instead  allowing me to keep the aspect ratio  but resize the image still   I dont mind if i cut off some of the image    Thanks in advance

User · Answer

If you don t want to stretch the image  fit it into div container without overflow and center it by adjusting it s margin if needed      The image will not get cropped  The aspect ratio will also remain the same    HTML    lt div id  app  gt       lt div id  container  gt         lt img src     alt  something  gt       lt  div gt       lt div id  container  gt         lt img src     alt  something  gt       lt  div gt       lt div id  container  gt         lt img src     alt  something  gt       lt  div gt   lt  div gt    CSS   div container       height  200px      width  200px      border  1px solid black      margin  4px    img       max-width  100       max-height  100       display  block      margin  0 auto

User · Answer

if you know the spect ratio you can use padding-bottom with percentage to set the hight depending on with of the diff     lt div gt      lt div style  padding-bottom  33    gt        i have 33  height of my parents width     lt  div gt   lt  div gt

User · Answer

You can use object-fit css3 property  something like    x000D   x000D   lt  doctype html gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt style gt  x000D       holder   x000D        display  inline  x000D        x000D       holder img   x000D        max-height  200px  x000D        max-width  200px  x000D        object-fit  cover  x000D        x000D     lt  style gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt div class  holder  gt  x000D       lt img src  meld png  gt  x000D     lt  div gt  x000D     lt div class  holder  gt  x000D       lt img src  twiddla png  gt  x000D     lt  div gt  x000D     lt div class  holder  gt  x000D       lt img src  meld png  gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    It is not exactly your answer  though  because of it doesn t stretch the container  but it behaves like the gallery and you can keep styling the img itself   Another drawback of this solution is still a poor support of the css3 property  More details are available here  http   www steveworkman com html5-2 javascript 2012 css3-object-fit-polyfill   jQuery solution can be found there as well

User · Answer

To make images adjustable flexible you could use this      fit images to container     container img       max-width  100       height  auto

User · Answer

transform  scale 0 5     Example   lt div gt Normal lt  div gt   lt div class  quot scaled quot  gt Scaled lt  div gt   div     width  80px    height  80px    background-color  skyblue      scaled     transform  scale 0 7      Equal to scaleX 0 7  scaleY 0 7       background-color  pink     see  https   developer mozilla org en-US docs Web CSS transform-function scale

User · Answer

You need to fix one side   eg height   and set the other to auto   Eg    height  120px   width  auto    That would scale the image based on one side only  If you find cropping the image acceptable  you can just set  overflow  hidden     to the parent element  which would crop out anything that would otherwise exceed its size

User · Answer

Put it as a background on your holder e g    lt div style  background url path to image myimage jpg  center center  width 120px  height 120px   gt   amp nbsp   lt  div gt    This will center your image inside a 120x120 div chopping off any excess of the image

User · Answer

this is a known problem with CSS resizing  unless all images have the same proportion  you have no way to do this via CSS   The best approach would be to have a container  and resize one of the dimensions  always the same  of the images  In my example I resized the width   If the container has a specified dimension  in my example the width   when telling the image to have the width at 100   it will make it the full width of the container  The auto at the height will make the image have the height proportional to the new width   Ex   HTML    lt div class  container  gt   lt img src  something png    gt   lt  div gt    lt div class  container  gt   lt img src  something2 png    gt   lt  div gt    CSS    container       width  200px      height  120px        resize images     container img       width  100       height  auto

User · Answer

This help me to make the image 150  with ease   img-popup img     transform  scale 1 5

[html] Changing image sizes proportionally using CSS?

HTML:

CSS:

Examples related to html

Examples related to css

Examples related to gallery