How to maintain aspect ratio using HTML IMG tag

Question

I am using an img tag of HTML to show a photo in our application  I have set both its height and width attribute to 64  I need to show any image resolution  e g  256x256  1024x768  500x400  205x246  etc   as 64x64  But by setting the height and width attributes of an img tag to 64  it s not maintaining the aspect ratio  so the image looks distorted   For your reference my exact code is    lt img src  Runtime Path to photo  border  1  height  64  width  64  gt

User · Answer

None of the methods listed scale the image to the largest possible size that fits in a box while retaining the desired aspect ratio.

This cannot be done with the IMG tag (at least not without a bit of JavaScript), but it can be done as follows:

 <div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div>

User · Answer

Don t set height AND width  Use one or the other and the correct aspect ratio will be maintained    x000D   x000D   widthSet   x000D      max-width  64px  x000D    x000D   x000D   heightSet   x000D      max-height  64px  x000D    x000D   lt img src  http   placehold it 200x250    gt  x000D   x000D   lt img src  http   placehold it 200x250  width  64    gt  x000D   x000D   lt img src  http   placehold it 200x250  height  64    gt  x000D   x000D   lt img src  http   placehold it 200x250  class  widthSet    gt  x000D   x000D   lt img src  http   placehold it 200x250  class  heightSet    gt  x000D   x000D   x000D

User · Answer

Wrap the image in a div with dimensions 64x64 and set width  inherit to the image        lt div style  width  64px  height  64px   gt       lt img src  Runtime path  style  width  inherit    gt   lt  div gt

User · Answer

lt img src  Runtime Path to photo       style  border  1px solid  000  max-width 64px  max-height 64px   gt

User · Answer

Try this    lt img src  Runtime Path to photo  border  1  height  64  width  64  object-fit  cover  gt    Adding object-fit  cover  will force the image to take up the space without losing the aspect ratio

User · Answer

The poster is showing a dimension constrained by height in most cases he posted  gt  gt  gt   256x256  1024x768  500x400  205x246  etc   but fitting a 64px max height pixel dimension  typical of most landscape  quot photos quot   So my guess is he wants an image that is always 64 pixels in height  To achieve that  do the following   lt img id  quot photo1 quot  style  quot height 64px width auto  quot  src  quot photo jpg quot  height  quot 64 quot    gt   This solution guarantees the images are all 64 pixels max in height and allows width to extend or shrink based on each image s aspect ratio  Setting height to 64 in the img height attribute reserves a space in the browser s Rendertree layout as images download  so the content doesn t shift waiting for images to download  Also  the new HTML5 standard does not always honor width and height attributes  They are dimensional  quot hints quot  only  not final dimensions of the image  If in your style sheet you reset or change the image height and width  the actual values in the images attributes get reset to either your CSS value or the images native default dimensions  Setting the CSS height to  quot 64px quot  and the width to  quot auto quot  forces width to start with the native image width  not image attribute width  and then calculate a new aspect-ratio using the CSS style for height  That gets you a new width  So the height and width  quot img quot  attributes are really not needed here and just force the browser to do extra calculations

User · Answer

Set width and height of the images to auto  but limit both max-width and max-height   img       max-width 64px      max-height 64px      width auto      height auto      Fiddle  If you want to display images of arbitrary size in the 64x64px  frames   you can use inline-block wrappers and positioning for them  like in this fiddle

User · Answer

With css   img       display table-cell      max-width    px      max-height    px      width 100

User · Answer

Why don t you use a separate CSS file to maintain the height and the width of the image you want to display  In that way  you can provide the width and height necessarily    eg                       image          width  64px         height  64px

User · Answer

here is the sample one   x000D   x000D  div  x000D     width  200px  x000D     height 200px  x000D     border solid x000D     x000D   x000D  img  x000D      width  100   x000D      height  100   x000D      object-fit  contain  x000D        x000D   lt div gt  x000D     lt img src  https   upload wikimedia org wikipedia meta 0 08 Wikipedia-logo-v2 1x png  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Use object-fit  contain in css of html element img  ex  img               object-fit  contain

[html] How to maintain aspect ratio using HTML IMG tag

Examples related to html

Examples related to css