Responsive CSS images with overlays

Question

Responsive CSS images with overlays

I need to stack two images on top of each other while ensuring they remain responsive with a percentage width and height.

<div class="container">
    <img src="res/bigger.png/>
    <img src="res/smaller.png class="icon"/>
</div>

.container {
  width:100%;
  height:100%;
  background-color:blue;
  postion:relative;
}
.container img {
   max-width:100%;
   max-heihgt: 100%;
   height: auto;
   width: auto;
}
.icon {
   position: relative;
   top: -70%;
   left: 20%;
   z-index: 50;
   width: 10% !important;
   height: auto !important;
}

When resizing the page, the smaller image may lose its position relative to the larger image due to their different proportions. How can I ensure the smaller image remains in the correct position relative to the larger image even when the page is resized?
For a demonstration of this issue, you can visit this link

html image css responsive-design

Answer 1

Answer №1

Instead of using two images, consider replacing the largest image with a container like this:

<div class="the-crew">
  <img src="res/smaller.png" />
</div>

Then, adjust the positioning by setting the container to position:relative and the smaller image to

position:absolute</code:</p>

<pre><code>.the-crew {
  position: relative;
  width: 100px;
  height: 75px;
}

.the-crew img {
  position: absolute;
  top: 10px;
  left: 10px;
}

This method ensures that the smallest image remains in a fixed position, as its absolute positioning is relative to the container. One drawback is having to set minimum dimensions for the parent container, but the benefit is achieving the effect entirely through CSS without needing JavaScript.

Answer 2

Instead of using two images, consider replacing the largest image with a container like this:

<div class="the-crew">
  <img src="res/smaller.png" />
</div>

Then, adjust the positioning by setting the container to position:relative and the smaller image to

position:absolute</code:</p>

<pre><code>.the-crew {
  position: relative;
  width: 100px;
  height: 75px;
}

.the-crew img {
  position: absolute;
  top: 10px;
  left: 10px;
}

This method ensures that the smallest image remains in a fixed position, as its absolute positioning is relative to the container. One drawback is having to set minimum dimensions for the parent container, but the benefit is achieving the effect entirely through CSS without needing JavaScript.

Responsive CSS images with overlays

Answer №1

Similar questions

What's the best way to ensure that a select and button have consistent heights in Bootstrap 5?

Tips for adjusting the initial scale to ensure your mobile website fits perfectly on the screen

How can I change the background color of a parent div when hovering over a child element using JavaScript

Are there ways to incorporate extra icons into NavMenu in Blazor 8?

Bootstrap CSS: arranging columns for mobile devices

The CSS3 Transform feature kicks in only after the window is resized in Mozilla Firefox

``What is the best way to adjust the layout of

overlapping text placed directly above another text

Generating unique triangle patterns through Webgl

Vertically align the left div in the center, while maintaining the standard alignment of the right div

You cannot embed a YouTube video using its iframe code in an HTML document, according to YouTube's guidelines

Customize React JS Material UI's InputBase to be responsive

Adjusting the background color of <tr> depending on the number of <tr> elements in the HTML using CSS

What are the best ways to format an outgoing email using inline CSS?

Bootstrap's nested grid system allows for intricate and dynamic layouts within

Tips for avoiding duplicate Id tags while using Ajax in MVC

Solving the Problem of Input Values with Jquery and Javascript

once a value is assigned to the variable "NaN," it remains constant and does not alter

What is the best way to adjust a fixed-width table to completely fill the width of a smartphone browser?

Is it possible to align images vertically with text in a multi-column Bootstrap 4 container?