Home/ Questions/Q 6657063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T01:43:15+00:00

I tried a Google search on this and still cannot figure out how to

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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