流体图像根据屏幕尺寸调整尺寸

Question

I have the following HTML:

<img src="https://www.sporedev.ro/pleiade/images/Maya.jpg" class="full-img">
<img src="https://www.sporedev.ro/pleiade/cufar.png" class="treasure treasure-maya">

And the following CSS:

.full-img{
    display: block;
    width: 100%;
    height: 100%;
    height: 100vh;  
}
.treasure{
height: 125px;
width:  120px;
} 

.treasure-maya{
    position: absolute; 
    top: 55%; 
    left: 44%;
    z-index: 2;
}

The reason why I use img instead of the CSS much simpler method, background-image , is because the image is being used as an image map.

Here is a JSFiddle.

Here is a link to my live project.

I tried adapting the .treasure image to the .full-img so that, when the .full-img is reducing in size, the .treasure image keeps its position and ratio.

I managed to find a solution, using media queries, but it's really counter-productive because I'd have to take into account a lot of different resolutions. I already added three media queries and that only takes care of some of the resolutions that I'd need to take into account (probably around 20 media queries).

I looked on Google and SO for a solution for my problem but I couldn't find an answer.

What I'd need, is to somehow make the .treasure img reduce in size together with the .full-img img .

Is this achievable?

If there's a way to do this in CSS I'd prefer that. If not, I guess that JS would be the only way to do it but, unfortunately, I'm a novice when it comes to JS.

Answer 1

Set image width using percentage instead of fixed width. I have removed the height for the image so the ratio is kept but you can change this if you need to

For example

 body { padding: 0; margin: 0; } .full-img { display: block; width: 100%; height: 100%; height: 100vh; } .treasure { width: 15%; } .treasure-maya { position: absolute; top: 55%; left: 44%; z-index: 2; } 

 <!-- This is the background image (I can't implement it in the CSS way because I use it together with <map> in my app ) --> <img src="https://www.sporedev.ro/pleiade/images/Maya.jpg" class="full-img"> <!-- This is the image that needs to reduce its height and width, according to the full-img reduction --> <img src="https://www.sporedev.ro/pleiade/cufar.png" class="treasure treasure-maya">