40

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:

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;   user-scalable=0;" name="viewport">
        <link rel="stylesheet" href="../includes/style.css">
    </head>
    <img class="test"  src="../includes/foo.jpg">

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:

   <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;  user-scalable=0;" name="viewport">
        <link rel="stylesheet" href="../includes/style.css">
    </head>
    <body width = "device-width">
        <img class="test"  src="../includes/buoy_map.jpg">
    </body>
2
  • 1
    Have you given any of the parent elements of the image a width?
    – Gerben
    Oct 5, 2011 at 13:33
  • 1
    Your img tag should be inside body. You don't actually have a body tag, so add one :-)
    – Bojangles
    Oct 5, 2011 at 13:35

7 Answers 7

66
img {
  max-width: 100%;
}

Should set the image to take up 100% of its containing element.

2
  • 1
    This is useful, in certain circumstances, but it will ignore the aspect ratio of your image, potentially skewing it. Sep 14, 2012 at 21:30
  • 8
    in that case it should include height: auto;
    – Geomorillo
    Mar 24, 2014 at 4:54
24
img
{
    max-width: 100%;
    min-width: 300px;
    height: auto;
}
2
  • This worked for me, but I need to exempt a logo on the page. Can a particular image be exempted?
    – WilliamK
    Jan 15, 2019 at 22:47
  • It's ok now. I reduced min-width to 100px.
    – WilliamK
    Jan 16, 2019 at 0:57
15

if you use bootstrap 3 , just add img-responsive class in your img tag

<img class="img-responsive"  src="...">

if you use bootstrap 4, add img-fluid class in your img tag

<img class="img-fluid"  src="...">

which does the staff: max-width: 100%, height: auto, and display:block to the image

3
  • I don't know why someone Voted Down this answer. This works well for me. The image squeezes well in Mobile browser. Thank you. Sep 30, 2017 at 0:22
  • height: auto; did the trick for me. Now my images are resizing accordingly to the resolution of the mobile device. Thank you Oct 20, 2017 at 12:50
  • This worked for me, but then I am using Bootstrap 4 so it was built in. For the OP that is probably not the case. May 20, 2019 at 14:33
9

You can use the following css to resize the image for mobile view

object-fit: scale-down; max-width: 100%
1
  • 1
    thank you so much for showing me the object-fit property. It was exactly what i was looking for and led me to even discovering objectposition.
    – briancoder
    Jun 3, 2021 at 15:57
2

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.

1

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.

0

img.thatimage
{
    max-width: 100%;
    min-width: 300px;
    height: auto;
}

/* This is how you set the style for a certain image */
<img class="thatimage" src="your_image_path" alt="" style="">

1
  • 1
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Dec 30, 2021 at 10:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.