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, 2022 in CSS by Edureka
• 13,620 points
321 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, 2022 by Edureka
• 12,690 points

Related Questions In CSS

0 votes
0 answers

How to make in CSS an overlay over an image?

I want to add this dark hue, ...READ MORE

Jul 22, 2022 in CSS by Edureka
• 13,620 points
294 views
0 votes
0 answers

Placing an image to the top right corner - CSS

I need to retain the current text ...READ MORE

Aug 10, 2022 in CSS by Edureka
• 13,620 points
2,879 views
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, 2022 in CSS by Edureka
• 12,690 points
865 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, 2022 in CSS by Edureka
• 12,690 points
533 views
0 votes
1 answer

Render HTML to an image

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

answered Feb 8, 2022 in Java by Soham
• 9,700 points
1,560 views
0 votes
1 answer

seo - images and h1

SEO is speculative at best. Generally, the accepted ...READ MORE

answered Mar 11, 2022 in Digital Marketing by narikkadan
• 63,420 points
548 views
0 votes
0 answers

When to use IMG vs. CSS background-image?

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

Mar 10, 2022 in Digital Marketing by Kichu
• 19,050 points
438 views
0 votes
1 answer

CSS - Darken image except for rectangle overlay

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

answered May 28, 2022 in CSS by Edureka
• 12,690 points
528 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, 2022 in CSS by Edureka
• 12,690 points
1,521 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, 2022 in CSS by Edureka
• 12,690 points
395 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP