Image doesn't change size with div container / window

Question

So I'm trying to get some images in my sidebar but they don't want to change size with container / window.

If i resize my window, the image gets under the middle area.

Link to preview my website

body{ background: grey }
#container{ width: 100%; height: 100%; text-align: center }
#sidebar{ margin: 0; padding: 0; float: left; width: 5%; height: 100%; background: rgba( 255, 255, 255, 0.8 ); border-radius: 3px; box-shadow: 3px 3px 3px 3px #333 }
#interface{ display: inline-block; margin: 0 auto; width: 94%; height: 100%; background: rgba( 255, 255, 255, 0.8 ); border-radius: 3px; box-shadow: 3px 3px 3px 3px #333 }

#icon_1{ max-width: 100%; max-height: 100% }

Answer 1

Add this on your CSS:

#icon_1 img {
   width:100%;
}

You are setting width values for containers but not for the img so it displays in full size.

Or better to get all Icon img at one selector:

#sidebar img {
   width:100%;
}