blob: a8fba94650b2b14a96eaa3136c491e1d53cc164d [file] [log] [blame]
<html>
<head>
<style>
.inline-block {
display: inline-block;
margin: 10px;
background-color: yellow;
}
.image-cropper {
position: relative;
overflow: hidden;
border: 0px red solid;
}
.fixed-container {
height: 80px;
width: 80px;
}
.fixed-thick-container {
height: 120px;
width: 120px;
}
.centered-out {
position: absolute;
left: -10;
top: -10;
}
.cenetered-in {
position: absolute;
left: 10;
top: 10;
}
.scaled-down {
transform: scale(0.8);
-webkit-transform: scale(0.8);
}
.scaled-up {
transform: scale(1.333);
-webkit-transform: scale(1.333);
}
</style>
</head>
<body>
<div class="inline-block image-cropper fixed-container"><img class="centered-out scaled-down" src="resources/svg-100x100-intrinsic.svg"></div>
<div class="inline-block image-cropper fixed-thick-container"><img class="cenetered-in scaled-down" src="resources/svg-100x100-intrinsic.svg"></div>
<div class="inline-block image-cropper fixed-container"><img class="centered-out scaled-up" src="resources/svg-100x100-intrinsic.svg"></div>
<div class="inline-block image-cropper fixed-thick-container"><img class="cenetered-in scaled-up" src="resources/svg-100x100-intrinsic.svg"></div>
<br>
<div class="inline-block image-cropper fixed-container"><img class="centered-out scaled-down" src="resources/svg-100x100-intrinsic.svg"></div>
<div class="inline-block image-cropper fixed-thick-container"><img class="cenetered-in scaled-down" src="resources/svg-100x100-intrinsic.svg"></div>
<div class="inline-block image-cropper fixed-container"><img class="centered-out scaled-up" src="resources/svg-100x100-intrinsic.svg"></div>
<div class="inline-block image-cropper fixed-thick-container"><img class="cenetered-in scaled-up" src="resources/svg-100x100-intrinsic.svg"></div>
<br>
<div class="inline-block image-cropper fixed-container"><img class="centered-out scaled-down" src="resources/svg-100x100-intrinsic.svg"></div>
<div class="inline-block image-cropper fixed-thick-container"><img class="cenetered-in scaled-down" src="resources/svg-100x100-intrinsic.svg"></div>
<div class="inline-block image-cropper fixed-container"><img class="centered-out scaled-up" src="resources/svg-100x100-intrinsic.svg"></div>
<div class="inline-block image-cropper fixed-thick-container"><img class="cenetered-in scaled-up" src="resources/svg-100x100-intrinsic.svg"></div>
</body>
</htm>