CODEWITHSUNDEEP
javascriptcss
SporeDev
SporeDev

Reputation: 608

Fluid image adapts size according to screen size

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.

Upvotes: 0

Views: 36

Answers (1)

Huangism
Huangism

Reputation: 16438

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">

Upvotes: 1

Related Questions