CODEWITHSUNDEEP
htmlcssimage
Richard
Richard

Reputation: 15862

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

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>

Upvotes: 42

Views: 219472

Answers (7)

ApolloWayne
ApolloWayne

Reputation: 53

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="">

Upvotes: 1

Doozer Blake
Doozer Blake

Reputation: 7797

img {
  max-width: 100%;
}

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

Upvotes: 69

Chaitra D
Chaitra D

Reputation: 187

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

object-fit: scale-down; max-width: 100%

Upvotes: 10

Lingjing France
Lingjing France

Reputation: 439

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

Upvotes: 18

adrianTNT
adrianTNT

Reputation: 4082

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.

Upvotes: 3

PerspectiveInfinity
PerspectiveInfinity

Reputation: 561

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

Upvotes: 25

konsolenfreddy
konsolenfreddy

Reputation: 9671

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.

Upvotes: 2

Related Questions