i already try to make this responsive like this: https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image2, i want it like shrink like an image, whatever screen in it, it will match in the position, imagine i put in every box image, but seems fail. https://jsfiddle.net/hnrfhyag/20/
To get responsiveness similar to the image link you gave, you need to set
width=100% and height=auto for the image.
In your jsfiddle example, you did the width part okay (defined it as a % of available space) but you are fixing the height - both for the outer box as well as the inner boxes. So no matter what you do, the height will stay the same. That will give distorted images when scaled.
So if you want responsively scaled images,
- Define one of the two (height or width) as a % of available space (you did this right)
- Define the other as auto - so that it scales properly
- Adjust the rest of the design to suit (so that other elements don't walk out of your layout).