Make an image responsive - the simplest way

Html Problem Overview

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>

Html Solutions

Solution 1 - Html

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.

Solution 2 - Html

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;

Solution 3 - Html

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%;
}

Solution 4 - Html

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.

Solution 5 - Html

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;
}

Solution 6 - Html

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.

Solution 7 - Html

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:

Solution 8 - Html

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

Solution 9 - Html

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

There is more in Stack Overflow question https://stackoverflow.com/questions/3029422/image-auto-resize-to-fit-div-container.

Solution 10 - Html

Images should be set like this

img { max-width: 100%; }

Solution 11 - Html

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

Solution 12 - Html

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.

Content Type	Original Author	Original Content on Stackoverflow
Question	Anonymous	View Question on Stackoverflow
Solution 1 - Html	Nick Ginanto	View Answer on Stackoverflow
Solution 2 - Html	user706001	View Answer on Stackoverflow
Solution 3 - Html	pyjavo	View Answer on Stackoverflow
Solution 4 - Html	OB7	View Answer on Stackoverflow
Solution 5 - Html	Sumith Harshan	View Answer on Stackoverflow
Solution 6 - Html	Abhishek Goel	View Answer on Stackoverflow
Solution 7 - Html	Beck	View Answer on Stackoverflow
Solution 8 - Html	JacobG182	View Answer on Stackoverflow
Solution 9 - Html	btevfik	View Answer on Stackoverflow
Solution 10 - Html	pixel 67	View Answer on Stackoverflow
Solution 11 - Html	Goodlife	View Answer on Stackoverflow
Solution 12 - Html	Gajendra Jena	View Answer on Stackoverflow