How do I automatically resize an image for a mobile site

Question

I tried a Google search on this and still cannot figure out how to resize an image by its width for various mobile devices  Here is my attempt   CSS   img test       width  100       height  auto      HTML    lt html gt       lt head gt           lt meta http-equiv  content-type  content  text html  charset ISO-8859-1  gt           lt meta content  width device-width  initial-scale 1 0  maximum-scale 1 0    user-scalable 0   name  viewport  gt           lt link rel  stylesheet  href     includes style css  gt       lt  head gt       lt img class  test   src     includes foo jpg  gt    But the image is still being loaded with its original scaling  I am a css and html newb so any help would be great   Edit   Thanks for the responses  Here is a revised version that now works    HTML        lt html gt       lt head gt           lt meta http-equiv  content-type  content  text html  charset ISO-8859-1  gt           lt meta content  width device-width  initial-scale 1 0  maximum-scale 1 0   user-scalable 0   name  viewport  gt           lt link rel  stylesheet  href     includes style css  gt       lt  head gt       lt body width    device-width  gt           lt img class  test   src     includes buoy map jpg  gt       lt  body gt

User · Answer

You can use the following css to resize the image for mobile view  object-fit  scale-down  max-width  100

User · Answer

Your css with doesn t have any effect as the outer element doesn t have a width defined  and body is missing as well    A different approach is to deliver already scaled images  http   www sencha com products io  for example delivers the image already scaled down depending on the viewing device

User · Answer

For me  it worked best to add this in image css  max-width 100   and NOT specify image width and height in html parameters  This adjusted the width to fit in device screen while adjusting height automatically  Otherwise height might be distorted

User · Answer

if you use bootstrap 3   just add img-responsive class in your img tag   lt img class  img-responsive   src       gt    if you use bootstrap 4  add img-fluid class in your img tag   lt img class  img-fluid   src       gt    which does the staff       max-width  100   height  auto  and display block to the image

User · Answer

img       max-width  100       min-width  300px      height  auto

User · Answer

img     max-width  100       Should set the image to take up 100  of its containing element

[html] How do I automatically resize an image for a mobile site?

Examples related to html

Examples related to css

Examples related to image