Изображение не изменяется размер с контейнером div/окном

Question

Так что я пытаюсь получить некоторые изображения в боковой панели, но они не хотят менять размер с помощью контейнера/окна.

Если я изменяю размер моего окна, изображение попадает под среднюю область.

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

Добавить это на CSS:

#icon_1 img { 
    width:100%; 
} 

Вы устанавливаете width значения для контейнеров, но не для img так отображается в полном размере.

Или лучше, чтобы получить все Icon IMG в один селектор:

#sidebar img { 
    width:100%; 
}