Looking to Achieve:
I have a PNG image of a shirt with a transparent background that I want to place on top of a colored square. I want the shirt in the image to stand out over the edges of the square, creating a visually appealing effect.
The image's width is set to 100%, and the height adjusts automatically to maintain the original aspect ratio. When the window is resized, the square's height and width should adjust in relation to the image's dimensions, ensuring a responsive design.
Previous Attempts:
I attempted to use a div for the colored square and an img HTML element for the image, placing both elements within a container:
Here is the CSS for the square:
.square {
width: 80%;
height: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
background-color: red;
z-index: -1;
}
CSS for the image:
.shirtImage {
width: 100%;
margin-left: auto;
margin-right: auto;
}
The container is simply a div.
The Issue:
The problem I encountered was that the 80% height set for the square was relative to the entire page, extending to the bottom, instead of just being contained within the div wrapping the image and square.
I understand that this method is flawed because I expected the square to derive its height from the parent div (wrapping div), which in turn should adjust based on the child image's height. I'm struggling to understand why it's not working and how to resolve this issue.