Изображение исчезает при повторной калибровке в CSS

Question

Я графический дизайнер, пытающийся закодировать веб-сайт. Я застрял на главной странице и был в течение нескольких недель. Моя проблема заключается в том, что я не могу получить изображение для изменения размера с помощью CSS, потому что оно исчезает или отключается. Вот что я пытаюсь do

Вот мой код:

#wrapper { 
 
     position: relative; 
 
} 
 

 
#wrapper > div { 
 
     border-radius: 50%; 
 
     width: 960px; 
 
     height: 100%; 
 
     overflow: hidden; 
 
     margin: auto; 
 
     position: relative; 
 
} 
 

 
#wrapper > div#home { 
 
     width: 291px; 
 
     height: 290px; 
 
     position: absolute; 
 
     -ms-transform: translate(-50%,-50%); /* IE 9 */ 
 
     -webkit-transform: translate(-50%,-50%); /* Safari */ 
 
     transform: translate(-50%,-50%); 
 
     -moz-transform: translate(-50%,-50%); 
 
} 
 

 
#wrapper > div#contact { 
 
     width: 291px; 
 
     height: 290px; 
 
     position: absolute; 
 
     -ms-transform: translate(-50%,-50%); /* IE 9 */ 
 
     -webkit-transform: translate(-50%,-50%); /* Safari */ 
 
     transform: translate(-50%,-50%); 
 
     -moz-transform: translate(-50%,-50%); 
 
     margin-left: -150px; 
 
     margin-top: 180px; 
 
     
 
} 
 

 
#wrapper > div#contact img { 
 
     width: 60%; 
 
     height: auto; 
 
     
 
}

Но с этим кодом я получаю this

Если вы посмотрите на contactbttn (значок телефона) вы можете видеть, что светящийся край обрезается.

Answer 1

Если вы удалили overflow: hidden; от #wrapper > div, тогда ваше изображение не будет отрезано. Все остальное зависит от вас, потому что я также не вижу, с чем мы имеем дело.