Make an image responsive - the simplest way

Question

I notice that my code is responsive, in the fact that if I scale it down to the size of a phone or tablet - all of the text, links, and social icons scale accordingly.

However, the ONLY thing that doesn't is my image in the body; which is wrapped in paragraph tags... with that being said, is there a simple way to make the image responsive as well?

Here's the code that I used to have my image show in the body:

<body>
    <center>
        <p><a href="MY WEBSITE LINK" target="_blank"><img src="IMAGE LINK" border="0" alt="Null"></a></p>
    </center>
</body>

I'm not sure I would call it a duplicate, since my code differs from his pretty heavily — Anonymous, Mar 17 '13 at 07:59
I was going to mark it as a duplicate of that until I realized someone else had already done so. — ArtOfWarfare, Oct 10 '14 at 12:16

score 124 · Accepted Answer · edited Mar 27 '19 at 23:49

124

You can try doing

<p>
  <a href="MY WEBSITE LINK" target="_blank">
    <img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
  </a>
</p>

This should scale your image if in a fluid layout.

For responsive (meaning your layout reacts to the size of the window) you can add a class to the image and use @media queries in CSS to change the width of the image.

Note that changing the height of the image will mess with the ratio.

edited Mar 27 '19 at 23:49

Peter Mortensen

30,738
21
105
131

answered Mar 17 '13 at 08:04

Nick Ginanto

31,090
47
134
244

It made my image HUGE lol, however it does scale down now. How can I have it keep it's original image dimensions? – Anonymous Mar 17 '13 at 08:07
22

add `max-width: 300px;` (for example) to it. and make it so it would the largest you want it be, this way it won't go beyond that – Nick Ginanto Mar 17 '13 at 08:11
Thank you, great answer. Also, what did you mean by the @media ? If you could explain that a little more in depth (I just started coding 2 days ago). – Anonymous Mar 17 '13 at 08:12
4

here is some official docs for media queries http://www.w3.org/TR/css3-mediaqueries/ and here is something which explains it better :) http://css-tricks.com/css-media-queries/ – Nick Ginanto Mar 17 '13 at 08:14
I have one additional question in regards to adding the ((( style:'width:___%' ))), if one of my users happens to view my site from their 50 inch TV or large computer screen, my logo will end up taking up most of their screen, whereas before, the logo only stayed at its dimensions... the (((max-width: 300px;))) may work, I tried but I might have placed it in the wrong area since it didn't work.. Where would it go? Also, must I keep it at 100%? – Anonymous Mar 17 '13 at 08:26
first, the 100% part only depends on the original dimensions of the image. if the image is really big, you should either make it smaller (will load faster) or set it the max-width to lower. That css you should put on `img { .. }` or engulf the img in a container div and enforce max-width on that – Nick Ginanto Mar 17 '13 at 08:29
2

should be `max-width: 100%;` for your images – pixel 67 Oct 10 '14 at 11:08

score 63 · Answer 2 · edited Jun 05 '21 at 11:49

63

Width: 100% will break it when you view on a wider are.

Following is Bootstrap's img-fluid.

max-width: 100%; 
display: block; 
height: auto;

edited Jun 05 '21 at 11:49

yogihosting

5,494
8
47
80

answered Aug 29 '14 at 07:59

user706001

980
7
8

score 27 · Answer 3 · edited Mar 27 '19 at 23:50

I would also recommend to use all the CSS properties in a different file than the HTML file, so you can have your code organized better.

So to make your img responsive, I would do:

First, name your <img> tag using a class or id attribute in your HTML file:

<img src="IMAGE LINK" border="0" class="responsive-image" alt="Null">

Then, in my CSS file I would make the changes to make it responsive:

.responsive-image {
  height: auto;
  width: 100%;
}

score 7 · Answer 4 · edited Mar 27 '19 at 23:53

To make all images on your website responsive, don't change your inline HTML from correct markup, as width:100% doesn't work in all browsers and causes problems in Firefox. You want to place your images on your website how you normally should:

<img src="image.jpg" width="1200px" height="600px" />

And then add to your CSS that any image max-width is 100% with height set to auto:

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

That way your code works in all browsers. It will also work with custom CMS clients (i.e. Cushy CMS) that require images to have the actual image size coded into the inline HTML, and it is actually easier this way when all you need to do to make images responsive is simply state in your CSS file that the max-width is 100% with height set to auto. Don't forget height: auto or your images will not scale properly.

score 6 · Answer 5 · edited Mar 27 '19 at 23:51

6

I'm using this technique to keep the logo as responsive for mobile devices as a simple way. The logo will resize automatically.

HTML

<div id="logo_wrapper">
  <a href="http://example.com" target="_blank">
    <img src="http://example.com/image.jpg" border="0" alt="logo" />
  </a>
</div>

CSS

#logo_wrapper img {
  max-width: 100%;
  height: auto;
}

edited Mar 27 '19 at 23:51

Peter Mortensen

30,738
21
105
131

answered Dec 12 '14 at 06:57

Sumith Harshan

6,325
2
36
35

score 6 · Answer 6 · edited Mar 27 '19 at 23:58

6

I use this all the time

You can customize the img class and the max-width property:

img{
    width: 100%;
    max-width: 800px;
}

max-width is important. Otherwise your image will scale too much for the desktop. There isn't any need to put in the height property, because by default it is auto mode.

edited Mar 27 '19 at 23:58

Peter Mortensen

30,738
21
105
131

answered Apr 19 '16 at 08:00

Abhishek Goel

18,785
11
87
65

this helped me solve markdown image responsive (redcarpet), thank you. – widjajayd May 14 '17 at 16:13

score 5 · Answer 7 · edited Mar 27 '19 at 23:55

If you are constrained to using an <img> tag:

I've found it much easier to set a <div> or any other element of your choice with a background-image, width: 100% and background-size: 100%.

This isn't the end all be all to responsive images, but it's a start. Also, try messing around with background-size: cover and maybe some positioning with background-position: center.

CSS:

.image-container{
  height: 100%; /* It doesn't have to be '%'. It can also use 'px'. */
  width: 100%;
  margin: 0 auto;
  padding: 0;

  background-image: url(../img/exampleImage.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
}

HMTL:

<div class="image-container"></div>

score 3 · Answer 8 · answered Mar 31 '15 at 13:39

3

To make an image responsive use the following:

CSS

.responsive-image {
        width: 950px;//Any width you want to set the image to.
        max-width: 100%;
        height: auto;
}

HTML

<img class="responsive-image" src="IMAGE URL">

answered Mar 31 '15 at 13:39

JacobG182

329
1
6

score 2 · Answer 9 · edited Mar 27 '19 at 23:49

2

Set height or the width of the image to be %100.

There is more in Stack Overflow question How do I auto-resize an image to fit a 'div' container?.

edited Mar 27 '19 at 23:49

Peter Mortensen

30,738
21
105
131

answered Mar 17 '13 at 08:06

btevfik

3,391
3
27
39

What if I set it to 50%, does that mean it'll be half of the original size when scaled down? – Anonymous Mar 17 '13 at 08:27
100% makes it fit the container. so when you resize the page, the container gets resized, therefore the img gets resized. – btevfik Mar 17 '13 at 08:29
Actually your the image auto resize link you sent explained it well. – Anonymous Mar 17 '13 at 08:30

score 1 · Answer 10 · edited Oct 10 '14 at 12:52

1

Images should be set like this

img { max-width: 100%; }

edited Oct 10 '14 at 12:52

Gottlieb Notschnabel

9,408
18
74
116

answered Oct 10 '14 at 11:10

pixel 67

1,530
18
22

Why set both the `width` and `max-width`? – ArtOfWarfare Oct 10 '14 at 12:03
Maybe setting the width and max-width to 100% is redundant, but I've used this and it works, I've changed the answer accordingly. If the image is not set at the correct size for the element, than setting `width: 100%` will break the layout. Setting `max-width: 100%` works. – pixel 67 Oct 10 '14 at 12:14

score 1 · Answer 11 · edited Mar 27 '19 at 23:56

1

Use Bootstrap to have a hustle free with your images as shown. Use class img-responsive and you are done:

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">

edited Mar 27 '19 at 23:56

Peter Mortensen

30,738
21
105
131

answered Aug 06 '15 at 21:10

Goodlife

3,822
2
24
23

score 0 · Answer 12 · edited Mar 27 '19 at 23:57

0

Instead of adding CSS to make the image responsive, adding different resolution images w.r.t. different screen resolution would make the application more efficient.

Mobile browsers don't need to have the same high resolution image that the desktop browsers need.

Using SASS it's easy to use different versions of the image for different resolutions using a media query.

edited Mar 27 '19 at 23:57

Peter Mortensen

30,738
21
105
131

answered Mar 24 '16 at 09:51

Gajendra Jena

490
6
7

Make an image responsive - the simplest way

12 Answers12

I use this all the time

Linked