user2721815 user2721815 - 7 months ago 12
HTML Question

why does my image stop resizing when centered with CSS

I have an image inside a DIV. I want the image to shrink if the size of the div goes below the size of the image. Bu I also want the image to be centered in the DIV.

This is my HTML:

<div id="logo">
<img src="/images/logo_2016.jpg">
</div>


This is my CSS

#logo img {
max-width:800px;
width: 100%;
}


This works to resize the image exactly like I want but the image is not centered in the DIV. If I try to center the image with:

#logo img {
margin:auto;
max-width:800px;
width: 100%;
}


Then it is centered but no longer resizes with the div.

How can I get it to do both? Thanks.

Answer

You forgot to add display: block;.

#logo img {
  margin:auto;
  max-width:800px;
  width: 100%;
  display: block; /* new */
}