Make an image responsive - the simplest way
Solution 1
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
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
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
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
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.
Anonymous
Updated on June 06, 2021Comments
-
Anonymous almost 3 years
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>
-
Anonymous about 11 yearsIt made my image HUGE lol, however it does scale down now. How can I have it keep it's original image dimensions?
-
Nick Ginanto about 11 yearsadd
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 -
Anonymous about 11 yearsThank 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).
-
Nick Ginanto about 11 yearshere is some official docs for media queries w3.org/TR/css3-mediaqueries and here is something which explains it better :) css-tricks.com/css-media-queries
-
Anonymous about 11 yearsI 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 about 11 yearsWhat if I set it to 50%, does that mean it'll be half of the original size when scaled down?
-
Nick Ginanto about 11 yearsfirst, 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 -
btevfik about 11 years100% makes it fit the container. so when you resize the page, the container gets resized, therefore the img gets resized.
-
Anonymous about 11 yearsActually your the image auto resize link you sent explained it well.
-
pixel 67 over 9 yearsshould be
max-width: 100%;
for your images -
ArtOfWarfare over 9 yearsWhy set both the
width
andmax-width
? -
pixel 67 over 9 yearsMaybe 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. Settingmax-width: 100%
works. -
OB7 almost 9 yearsheight: initial; for IE
-
widjajayd about 7 yearsthis helped me solve markdown image responsive (redcarpet), thank you.