CSS scale down image to fit in containing div without specifing original size

Question

I want to have a website where I can upload images of different sizes to be displayed in a jquery slider  I can t seem to fit  scaling down  the image in a containing div  Here s how I m intending to do it   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org     TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt   lt title gt Untitled Document lt  title gt    lt link rel  stylesheet  type  text css  href  Imtest css   gt   lt  head gt    lt body gt    lt div id  wrapper  gt     lt div id  im  gt  lt img src  Images Scarpa2 1 jpg    gt  lt  div gt    lt  div gt     lt  body gt   lt  html gt    And the CSS   wrapper       width  400px      height  400px      border  2px black solid      margin  auto      im       max-width  100       I ve tried to set the max-width of my image to 100  in CSS  But that doens t work

User · Answer

if you want both width and the height you can try    background-size  cover  important    but this wont distort the image but fill the div

User · Answer

This is an old question I know  but this is in the top five for several related Google searches  Here s the CSS-only solution without changing the images to background images   width  auto  height  auto  max-width  MaxSize  max-height  MaxSize     MaxSize  is a placeholder for whatever max-width and max-height you want to use  in pixels or percentage  auto will increase  or decrease  the width and height to occupy the space you specify with MaxSize  It will override any defaults for images you or the viewer s browser might have for images  I ve found it s especially important on Android s Firefox  Pixels or percentages work for max size  With both the height and width set to auto  the aspect ratio of the original image will be retained   If you want to fill the space entirely and don t mind the image being larger than its original size  change the two max-widths to min-width  100  - this will make them completely occupy their space and maintain aspect ratio  You can see an example of this with a Twitter profile s background image

User · Answer

I use   object-fit  cover  -o-object-fit  cover    to place images in a container with a fixed height and width  this also works great for my sliders  It will however cut of parts of the image depending on it s

User · Answer

Several of these things did not work for me    however  this did  Might help someone else in the future  Here is the CSS        img-area        display  block       padding  0px 0 0 0px       text-indent  0       width  100        background-size  100  95        background-repeat  no-repeat       background-image  url  https   yourimage png

User · Answer

I am using this  both smaller and large images    product p image   text-align  center  width  220px  height  160px  overflow  hidden     product p image img  max-width  100   max-height  100

User · Answer

You can use a background image to accomplish this   From MDN - Background Size  Contain      This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area    Demo  CSS    im       position  absolute      top  0      left  0      right  0      bottom  0      background-image  url  path to img        background-repeat  no-repeat      background-size  contain      HTML    lt div id  wrapper  gt       lt div id  im  gt       lt  div gt   lt  div gt

User · Answer

It s very simple  Just Set width of img to 100

User · Answer

I believe this is the best way of doing it  I ve tried it and it works very well    img     object-fit  cover      This is where I found it  Good luck

User · Answer

In a webpage where I wanted a in image to scale with browser size change and remain at the top  next to a fixed div  all I had to do was use a single CSS line  overflow hidden  and it did the trick  The image scales perfectly    What is especially nice is that this is pure css and will work even if Javascript is turned off   CSS    ImageContainerDiv     overflow  hidden      HTML    lt div id  ImageContainerDiv  gt     lt a href  URL goes here  target   blank  gt       lt img src  MapName png  alt  Click to load map    gt     lt  a gt   lt  div gt

User · Answer

Hope this will answer the age old problem  Without using CSS background property   Html   lt div class  card-cont  gt    lt img src  demo png    gt   lt  div gt    Css   card-cont    width 100     height 150px      card-cont img    max-width  100     min-width  100     min-height  150px

[html] CSS scale down image to fit in containing div, without specifing original size

Examples related to html

Examples related to css

Examples related to scaling