Make an image responsive - the simplest way

0 votes

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>
Jun 20 in CSS by Edureka
• 8,060 points
5 views

1 answer to this question.

0 votes

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>

If you're using a fluid layout, this should scale your image.

To make your layout responsive (that is, it responds to the size of the window), add a class to the picture and use @media queries in CSS to adjust the width of the image.

It should be noted that changing the image's height will throw off the ratio.

answered Jun 21 by Edureka
• 9,540 points

Related Questions In CSS

0 votes
1 answer

Is there any way to animate an ellipsis with CSS animations?

You might try to time each ellipsis ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
26 views
0 votes
1 answer

What is the proper way to display a logo with CSS?

An <img> element is the proper way ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
18 views
0 votes
1 answer

Position a CSS background image x pixels from the right?

The attribute border can be used as ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
14 views
0 votes
1 answer
0 votes
1 answer

Render HTML to an image

To answer your question, there are a ...READ MORE

answered Feb 8 in Java by Soham
• 8,730 points
296 views
0 votes
0 answers

seo - images and h1

I like to have logos instead of ...READ MORE

Mar 9 in Digital Marketing by Kichu
• 19,040 points
29 views
0 votes
0 answers

When to use IMG vs. CSS background-image?

In what situations is it more appropriate ...READ MORE

Mar 10 in Digital Marketing by Kichu
• 19,040 points
25 views
0 votes
1 answer

CSS - Darken image except for rectangle overlay

Perhaps try constructing four boxes, one on ...READ MORE

answered May 28 in CSS by Edureka
• 9,540 points
26 views
0 votes
1 answer

Is there any way to colorize a white PNG image with CSS only?

Filters can be used with -webkit-filter and ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
27 views
0 votes
1 answer

How do I give text or an image a transparent background using CSS?

Use either a semi-transparent PNG or SVG ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
25 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP