How can an image be placed and styled within a div of arbitrary aspect ratio to ensure it is inscribed and centered, while maintaining its position when the frame is scaled?
- Ensure the image is both inscribed and centered
- Set dimensions and position using relative values so it remains inscribed and centered when uniformly scaled, requiring minimal javascript
- Minimize extra markup
Desired result:
See a fiddle template, with the following:
Markup
Should pillarbox
<div class="frame">
<img src="http://www.placekitten.com/200/300" />
</div>
Should letterbox
<div class="frame">
<img src="http://www.placekitten.com/300/200" />
</div>
CSS
.frame {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 10px 0px 100px 0;
}