shj shj - 1 year ago 67
CSS Question

CSS How to make image size relative to parent?

I want to place image in other image as you see below

image in image with div

And I made it using below codes.


<div class="col col-span-1" style="position : relative">
<img style="max-width:800px; max-height:800px;
width:100%; height:100%;"
<div style="position : absolute; top: 80%; left:50%; ">
<img src=""
style="width: 100%; height: 100%;">


.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;


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.

before ->(responsive) after

I want to use CSS only as possible, thanks in advance.

Answer Source

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">
    <img style="max-width:800px; max-height:800px;width:100%; height:100%;" src="">
  <table style="position: absolute;top: 75%;width: 85%;">
        <td style=" width: 60%;"></td>
        <td style=" max-width: 90px; width: 39%;">
          <div style="">
            <img src="" style="width:100%; height: 100%;">