html - CSS Polaroid style image/caption scaling issues -

i have fixed proportion images , wrap them in polaroid style graphic caption using css. total image should take approximately 60% of vertical height of screen , width should scale 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 window narrowed vertically distorts image likewise, , when window narrowed horizontally size of image falls out of sync size of caption.

what cause of this? there solution?

just add height img instead of span, , add width: auto.

additionally put background in span , center image improve visualization.

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; }