div要素を親divと重複させないようにするにはどうすればいいですか？

Question

私は隠しにオーバーフローを設定しようとしましたが、これは親divにオーバーラップしてしまう画像をカットします。私は彼らが切断されずに親のdiv内に含まれることを望みます。これを達成するために私はどのような価値を調整すべきですか？

Here is the fiddle.

body { 
    font-family: Europa; 
    margin: 0 auto; 
} 

.box { 
    position: relative; 
    width: 600px; 
    height: 500px; 
    border-radius: 20px; 
    border: solid #6441a5; 
    background:#6441a5; 
} 

div { 
    padding: 10px; 
    width: 100px; 
    width: 100px; 
} 

    div img { 
    height: 100%; 
    width: 100%; 
    border-radius: 100px; 
} 

.results-wrap { 
    height: 100%; 
    position: absolute; 
} 

Answer 1

彼らは合うかだけで収まらない画像削除することができますので、それらを小さくしてください：

div img { 
    height: 100%; 
    width: 75%; 
    border-radius: 100px; 
} 

Jsのフィドル：https://jsfiddle.net/bLm9antL/7/

Answer 2

まず、固定を削除しますdiv.boxのheightを入力し、imgにdisplay: blockを追加して彼らはあなたの■は高さが500pxなどに固定しなければならない場合、私は知らない別の

body { 
 
    font-family: Europa; 
 
    margin: 0 auto; 
 
} 
 

 
.box { 
 
    position: relative; 
 
    width: 600px; 
 
    border-radius: 20px; 
 
    border: solid #6441a5; 
 
    background:#6441a5; 
 
} 
 

 
div { 
 
    padding: 10px; 
 
} 
 

 
    div img { 
 
    height: 100%; 
 
    width: 100px; 
 
    border-radius: 100px; 
 
    display:block; 
 
} 
 

 
.results-wrap { 
 
}

<div class="header"> 
 
    </div> 
 
    <div class="box"> 
 
     <div class ="results-wrap"> 
 
     <div class="results"><img src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyBVE0UKugTT3yaJZ7fpr1nVK_RC9R5853AodqdLWMcsDl4PQw'/> 
 
     <img src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyBVE0UKugTT3yaJZ7fpr1nVK_RC9R5853AodqdLWMcsDl4PQw'/> 
 
     <img src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyBVE0UKugTT3yaJZ7fpr1nVK_RC9R5853AodqdLWMcsDl4PQw'/> 
 
     <img src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyBVE0UKugTT3yaJZ7fpr1nVK_RC9R5853AodqdLWMcsDl4PQw'/> 
 
     <img src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyBVE0UKugTT3yaJZ7fpr1nVK_RC9R5853AodqdLWMcsDl4PQw'/> 
 
     <img src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyBVE0UKugTT3yaJZ7fpr1nVK_RC9R5853AodqdLWMcsDl4PQw'/> 
 
     <img src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyBVE0UKugTT3yaJZ7fpr1nVK_RC9R5853AodqdLWMcsDl4PQw'/> 
 
     <img src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyBVE0UKugTT3yaJZ7fpr1nVK_RC9R5853AodqdLWMcsDl4PQw'/> 
 
     
 
     
 
     </div> 
 
     </div> 
 
    </div>

Answer 3

以下の1か

.box { 
    position: relative; 
    width: 600px; 
    /*height: 500px;*/ 
    border-radius: 20px; 
    border: solid #6441a5; 
    background:#6441a5; 
} 
.results-wrap { 
    /*position: absolute;*/ 
} 

jsfiddle