CSS How to make image size relative to parent? - html

Question

I want to place image in other image as you see below
And I made it using below codes.
HTML
<div class="col col-span-1" style="position : relative">
<div>
<img style="max-width:800px; max-height:800px;
width:100%; height:100%;"
src="https://i.imgur.com/iY3x1GC.png">
</div>
<div style="position : absolute; top: 80%; left:50%; ">
<img src="https://i.imgur.com/C1uxk6Y.png"
style="width: 100%; height: 100%;">
</div>
</div>
CSS
.col-span-1 {
flex-basis: 8.3333%;
}
.col {
flex: 1 1 8%;
margin: 0 0 0.5rem 0;
padding: 0.5em 10px;
box-sizing: border-box;
}
myJSFiddle
I made div1's image responsive with width using width : 100%
But I don't know how to make div2's image scale up/down relative to div1's image.
I want to make it like this.
->(responsive)
I want to use CSS only as possible, thanks in advance.

Answer 1

To resize small images, putting them in small container and pushing that small container with another element is a clean solution. In my opinion tables are great for that.
Here is the code;
<div class="col col-span-1" style="position : relative">
<div>
<img style="max-width:800px; max-height:800px;width:100%; height:100%;" src="https://i.imgur.com/iY3x1GC.png">
</div>
<table style="position: absolute;top: 75%;width: 85%;">
<tbody>
<tr>
<td style=" width: 60%;"></td>
<td style=" max-width: 90px; width: 39%;">
<div style="">
<img src="https://i.imgur.com/C1uxk6Y.png" style="width:100%; height: 100%;">
</div>
</td>
</tr>
</tbody>
</table>
</div>

Answer 2

here is the code
html:
<div id="container">
<div id="main_image"> <img style="max-width:800px; max-height:800px; width:100%; height:100%;" src="https://i.imgur.com/iY3x1GC.png"></div>
<div id="overlay_image"> <img src="https://i.imgur.com/C1uxk6Y.png" style="
width: 100%;
height: 100%;
"></div>
</div>
css:
#container{
position: relative;
width: 100%;
height: 100%;
}
#main_image{
width: 100%;
height: 100%;
}
#overlay_image{
position: absolute;
bottom: 10px;
right: 10px;
width: auto;
height: auto;
}
#media screen and (min-width: 601px) {
#overlay_image{
width:40px;
}
}
#media screen and (max-width: 600px) {
#overlay_image{
width:20px;
}
}