Polaroid style CSS image / header scaling issues
I have fixed aspect ratios of images and I would like to wrap them in graphics as inline polaroids using CSS. The overall image should be about 60% of the vertical height of the screen, and the width should be scaled accordingly.
Markup
<span>
<img src="https://placekitten.com/g/320/320">
<div>Kitler, 1978</div>
</span>
CSS
span {
border: none;
height: 60vh;
position: absolute;
}
span img {
background-color: #333;
border: 1rem solid white;
padding: 0;
height: 100%;
}
span div {
background-color: white;
border: 1rem solid white;
font-size: 2rem;
color: #333;
text-align: left;
margin-top: -1rem;
height: 2rem;
padding: 0.5rem;
}
Example here
Unfortunately, when the window shrinks vertically, it distorts the image similarly, and when the window shrinks horizontally, the image size falls out of sync with the caption size.
What is the reason for this? Is there any solution?
source to share
Just add height in img
instead span
and add width: auto
.
Also, I put the background in a range and center the image for better rendering.
span {
border: none;
position: absolute;
background-color: white;
text-align:center;
}
span img {
background-color: #333;
border: 1rem solid white;
padding: 0;
height:55vh;
position:relative;
width:auto;
}
span div {
border: 1rem solid white;
font-size: 2rem;
color: #333;
text-align: left;
margin-top: -1rem;
height: 2rem;
padding: 0.5rem;
}
source to share