CSS How can I set image size relative to parent height

Question

I am trying to figure out how to re-size an image so that it keeps it ratio of width to height  but gets re-sized until the height of the image matches the height of the containing div  I have these images that are pretty large and long  screenshots   and I want to put them into a 200px width  180px height div for display and without re-sizing the images manually  To make this look good  the sides of the image need to overflow and be hidden with the containing div  This is what I have so far   http   jsfiddle net f9krj 2   HTML   lt a class  image container  href  http   www skintype ca assets background-x large jpg  gt       lt img src  http   www skintype ca assets background-x large jpg  alt      gt   lt  a gt    CSS  a image container       background-color   999      width  200px      height  180px      display  inline-block      overflow  hidden    a image container img       width  100       As you can see  there is grey color showing on the images parent container which should not be shown at all  In order for that container to be filled completely  the width needs to be overflowed equally on both sides  Is this possible  Is it also possible to account for an image that is also too tall

User · Answer

you can use flex box for it   this will solve your problem  image-parent         height 33px        display flex

User · Answer

Change your code   a image container img       width  100       To this   a image container img       width  auto     to maintain aspect ratio  You can use 100  if you don t care about that     height  100       http   jsfiddle net f9krj 5

User · Answer

If all your trying to do is fill the div this might help someone else  if aspect ratio is not important  is responsive   img-fill  gt  img     min-height  100     min-width  100

User · Answer

If you take answer s Shekhar K  Sharma  and it almost work  you need also add to your this height  1px  or this width  1px  for must work

User · Answer

Use max-width property of CSS  like this    img    max-width 100

User · Answer

Original Answer   If you are ready to opt for CSS3  you can use css3 translate property  Resize based on whatever is bigger  If your height is bigger and width is smaller than container  width will be stretch to 100  and height will be trimmed from both side  Same goes for larger width as well   Your need  HTML    lt div class  img-wrap  gt     lt img src  http   lorempixel com 300 160 nature     gt   lt  div gt   lt div class  img-wrap  gt     lt img src  http   lorempixel com 300 200 nature     gt   lt  div gt   lt div class  img-wrap  gt     lt img src  http   lorempixel com 200 300 nature     gt   lt  div gt    And CSS    img-wrap     width  200px    height  150px    position  relative    display  inline-block    overflow  hidden    margin  0     div  gt  img     display  block    position  absolute    top  50     left  50     min-height  100     min-width  100     transform  translate -50   -50        Voila  Working  http   jsfiddle net shekhardesigner aYrhG   Explanation  DIV is set to the relative position  This means all the child elements will get the starting coordinates  origins  from where this DIV starts   The image is set as a BLOCK element  min-width height both set to 100  means to resize the image no matter of its size to be the minimum of 100  of it s parent  min is the key  If by min-height  the image height exceeded the parent s height  no problem  It will look for if min-width and try to set the minimum height to be 100  of parents  Both goes vice-versa  This ensures there are no gaps around the div but image is always bit bigger and gets trimmed by overflow hidden   Now image  this is set to an absolute position with left 50  and top 50   Means push the image 50  from the top and left making sure the origin is taken from DIV  Left Top units are measured from the parent   Magic moment   transform  translate -50   -50     Now  this translate function of CSS3 transform property moves repositions an element in question  This property deals with the applied element hence the values  x  y  OR  -50   -50   means to move the image negative left by 50  of image size and move to the negative top by 50  of image size    Eg  if Image size was 200px  times  150px  transform translate -50   -50   will calculated to translate -100px  -75px     unit helps when we have various size of image   This is just a tricky way to figure out centroid of the image and the parent DIV and match them   Apologies for taking too long to explain   Resources to read more    https   developer mozilla org en-US docs Web CSS transform-function translate https   css-tricks com centering-css-complete-guide

[html] CSS: How can I set image size relative to parent height?

Examples related to html

Examples related to image

Examples related to css