Stretch Image to Fit 100 of Div Height and Width

Question

I have a div with the following CSS   mydiv      top  50px      left  50px      width  200px      height  200px      and my HTML looks like this   lt div id    mydiv  gt       lt img src    folder file jpg  width    200px  height    200px  gt   lt  div gt    I d like my web image to always be the same size  in a 1 1 aspect ration  no matter what the resolution of the actual image is   If my actual image files are square  with 1 1 ratio  then this isn t a problem   But if the actual image files are not square then the displayed web image do stretch to 100  of both the div s height and width  in this case 200px      How do I get different image sizes to fit to my DIV

User · Answer

will the height attribute stretch the image beyond its native resolution? If I have a image with a height of say 420 pixels, I can't get css to stretch the image beyond the native resolution to fill the height of the viewport.

I am getting pretty close results with:

 .rightdiv img {
        max-width: 25vw;
        min-height: 100vh;
    }

the 100vh is getting pretty close, with just a few pixels left over at the bottom for some reason.

User · Answer

Instead of setting absolute widths and heights  you can use percentages    mydiv img       height  100       width  100

User · Answer

Or you can put in the CSS    lt style gt  div img     background-image  url    file png      color yellow  this part doesn t matter    height 100     width 100      lt  style gt

User · Answer

You re mixing notations  It should be    lt img src  folder file jpg  width  200  height  200  gt     note  no px   Or    lt img src  folder file jpg  style  width  200px  height  200px   gt     using the style attribute  The style attribute could be replaced with the following CSS    mydiv img       width  200px      height  200px      or   mydiv img       width  100       height  100

[html] Stretch Image to Fit 100% of Div Height and Width

Examples related to html

Examples related to css