0

I am trying to make my logo image responsive on my page. I used the created a responsive class and in the stylesheet set the width of that class to max-width 100%, but the image still isn't scaling when I resize the browser.

HTML part:

<div align="center" class="div3">
    <img src="http://www.revolutionvinyl.net/rvgglitch.gif" width="700" 
    height="700" class="responsive" alt="RVG Logo"> 
</div>

CSS part:

.responsive {
    max-width: 100%;
    display: block; 
    height: auto;
}

Thank you in advance! This site has been driving me crazy, so this fix will help out a lot.

johannchopin
  • 13,720
  • 10
  • 55
  • 101
RVG
  • 3
  • 2
  • Possible duplicate of [How do I auto-resize an image to fit a 'div' container?](https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container) – Marius Mucenicu Oct 26 '19 at 09:56
  • Yes it is. I was still having issues with the image being too big, this corrected it. – RVG Oct 27 '19 at 00:39

1 Answers1

0

You're setting an explicit, hard width of 700px on the img, which negates what you were aiming for with the max-width: 100%. If you want the image to keep scaling, but not beyond the viewport, try this instead:

.responsive {
  width: 100%;
  max-width: 100%;
  display: block;
  height: auto;
}
<div align="center" class="div3"><img src="http://www.revolutionvinyl.net/rvgglitch.gif" class="responsive" alt="RVG Logo"> </div>

jsFiddle

Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61
  • Thanks Andy! Took a bit of work since Dreamweaver wouldn't save that bit of code in the stylesheet no matter how many times I tried saving the file, but I got around it by just adding a style tag to the image HTML. Had to change the width to 700 as well while keeping the max at 100% to achieve my desired look. You just saved me even more frustration. Learning this whole CSS thing as I go has been a lot harder than I expected, but I'm slowly catching on. – RVG Oct 26 '19 at 08:33