59 lines
2.5 KiB
HTML
59 lines
2.5 KiB
HTML
<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>
|