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%;
}
Pergunta
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.
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% }
Solução
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%;
}