How to set an image s width and height without stretching it

Question

If I have    logo       width  400px      height  200px      then    lt img id  logo  src  logo jpg   gt    will stretch to fill that space  I want the image to stay the same size  but for it to take up that much space in the DOM  Do I have to add an encapsulating  lt div gt  or  lt span gt   I hate adding markup for styling

User · Answer

If using flexbox is a valid option for you (don't need to suport old browsers), check my other answer here (which is possibly a duplicate of this one):

Basically you'd need to wrap your img tag in a div and your css would look like this:

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 400px; height: 200px;

    img {
        margin: auto;
        max-width: 100%;
        max-height: 100%;
    }
}

User · Answer

2017 answer  CSS object fit works in all current browsers  It allows the img element to be larger without stretching the image    You can add object-fit  cover  to your CSS

User · Answer

you can try setting the padding instead of the height width

User · Answer

What I can think of is to stretch either width or height and let it resize in ratio-aspect  There will be some white space on the sides  Something like how a Wide screen displays a resolution of 1024x768

User · Answer

This is quite old question  but I have had the exact same annoying issue where everything worked fine for Chrome Edge  with object-fit property  but same css property did not work in IE11  since its unsupported in IE11   I ended up using HTML5  figure  element which solved all my problems   I personally did not use the outer DIV tag since that did not help at all in my case  so I avoided the outer DIV and simply replaced with  figure  element   The below code forces the image to reduce scale down nicely  without changing the original aspect ratio     lt figure class  figure-class  gt     lt img class  image-class  src    photoURL      gt   lt  figure gt    and css classes    image-class       border  6px solid  E8E8E8      max-width  189px      max-height  189px      figure-class       width  189px      height  189px

User · Answer

Load the image as a background for a div  Instead of   lt img id  logo  src  picture jpg  gt   do  lt div id  logo  style  background url picture jpg   gt  lt  div gt   All browsers will crop the part of the image that doesn t fit  This has several advantages over wrapping it an element whose overflow is hidden   No extra markup  The div simply replaces the img  Easily center or set the image to another offset  eg  url pic  center top  Repeat the image when small enough   Ok  I don t know  why you would want that  Set a bg color in the same statement  easily apply the same image to multiple elements  and everything that applies to bg images   Update  This answer is from before object-fit  you should now probably use object-fit object-position  It is still useful for older browsers  for extra properties  such as background-repeat   and for edge cases  For example  workaround Chrome bugs with flexbox and object-position and FF s  former   issues with grid   autoheight   object-fit  Wrapper divs in grid   flexbox often give    unintuitive results

User · Answer

Do I have to add an encapsulating  lt div gt  or  lt span gt     I think you do  The only thing that comes to mind is padding  but for that you would have to know the image s dimensions beforehand

User · Answer

Make a div and give it a class  Then drop a img in it    lt div class  mydiv  gt    lt img src  location of your image   gt  lt  img gt    lt  div gt    Set the size of your div and make it relative        mydiv           position  relative          height 300px          width  100           overflow  hidden          then style your image  img       width  100       height  auto      overflow  hidden      Hope that helps

User · Answer

Yes you need an encapsulating div    lt div id  logo  gt  lt img src  logo jpg  gt  lt  div gt    with something like    logo   height  100px  width  200px  overflow  hidden      Other solutions  padding  margin  are more tedious  in that you need to calculate the right value based on the image s dimensions  but also don t effectively allow the container to be smaller than the image   Also  the above can be adapted much more easily for different layouts  For example  if you want the image at the bottom right    logo   position  relative  height  100px  width  200px     logo img   position  absolute  right  0  bottom  0

User · Answer

CSS3 object-fit   Am not sure how far its been implemented by webkit  IE and firefox  But Opera works like magic     object-fit works with SVG content  but the same effect can also be achieved by setting the preserveAspectRatio    attribute in the SVG itself    img     height  100px    width  100px    -o-object-fit  contain      Chris Mills demo s it here http   dev opera com articles view css3-object-fit-object-position

User · Answer

You can use as below     x000D   x000D   width100   x000D    max-width  100px  x000D    height  100px  x000D    width  auto  x000D    border  solid red  x000D    x000D   lt img src  https   www gravatar com avatar dc48e9b92e4210d7a3131b3ef46eb8b1 s 512 amp d identicon amp r PG  class  width100    gt  x000D   x000D   x000D

User · Answer

logo       width  400px      height  200px         Scale down will take the necessary specified space that is 400px x 200px without stretching the image       object-fit scale-down

[html] How to set an image's width and height without stretching it?

Examples related to html

Examples related to css