Исправить изображения/кнопки до краев divs?

Question

Я пытаюсь добиться того, что отображается на изображении, и с очень трудным временем пытаться получить их. Какой был бы лучший подход для достижения этого с помощью HTML/CSS, сохраняя при этом его отзывчивость, если это вообще возможно?

<div class="tool-div"> 
    <img src="{{ obj.image.url }}"> 
    <div> 
     <li>It Does this and that and that</li> 
     <li>It Does this and that and that and that</li> 
     <li>It Does this and that and that and that</li> 
     <li>It Does this and that and that and that</li> 
    </div> 
    <button class="btn btn-primary center-block">{{ obj.title }}</button> 
</div> 



.tool-div { 
    max-width: 50%; 
    margin: 20px; 
    height: 100px; 
} 


.tool-div img { 
    border-radius: 50%; 
    height: 100%; 
    position: absolute; 
    left: 20; 
} 

Answer 1

Я думаю, что лучший подход был бы использовать absolute/relative позиционирования для перемещения элементов вокруг. Вот пример

div{ 
 
    width: 50%; 
 
    height: 200px; 
 
    border: 2px solid #333 
 
    box-sizing: border-box; 
 
    margin: 0 auto; 
 
    background: green; 
 
    position: relative; /*set position relative*/ 
 
} 
 
div span.circle{ 
 
    height: 100%; 
 
    display:block; 
 
    width: 200px; 
 
    border-radius: 50%; 
 
    background: red; 
 
    left: -100px; top: 0; /*move left half the width of the element*/ 
 
    position: absolute; /*set position absolute*/ 
 
} 
 
div span.square { 
 
    height: 75px; 
 
    width: 150px; 
 
    background: blue; 
 
    position:absolute; 
 
    /* quick vertical align */ 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    right: -75px; 
 
} 
 
div ul{ 
 
    width: 100px; 
 
    margin: auto; 
 
    display:block; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<div> 
 
<span class="circle"></span> 
 
<ul> 
 
    <li>stuff</li> 
 
    <li>stuff</li> 
 
</ul> 
 
<span class="square"></span> 
 
</div>