Menu
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> 
674
To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically. The important thing to know is that you should always use relative units for the width property like percentage, rather than absolute ones like pixels.
Using CSS “max-width” Property The most commonly used CSS property to make an Image responsive is the max-width property. You can set the value as 100%. You can do this inline by using the style attribute on each image.
Responsive images are the set of techniques used to load the right image based on device resolution, orientation, screen size, network connection, and page layout. The browser should not stretch the image to fit the page layout, and loading it shouldn't result in time & bandwidth wastage.
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.
195
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
