I took inspiration from the cropper.js library website but made modifications. You can check out the original example here.
Here's my version of the modified example: CodePen Link
var image1
var cropper1
var image2
var cropper2
function cropperInstances() {
image1 = document.querySelector('#image1');
cropper1 = new Cropper(image1, {
dragMode: 'move',
aspectRatio: 1 / 1,
restore: false,
guides: false,
center: true,
highlight: false,
cropBoxMovable: false,
cropBoxResizable: false,
toggleDragModeOnDblclick: false,
minCropBoxWidth: 300,
minCropBoxHeight: 300,
});
image2 = document.querySelector('#image2');
cropper2 = new Cropper(image2, {
dragMode: 'move',
aspectRatio: 1 / 1,
restore: false,
guides: false,
center: true,
highlight: false,
cropBoxMovable: false,
cropBoxResizable: false,
toggleDragModeOnDblclick: false,
minCropBoxWidth: 300,
minCropBoxHeight: 300,
});
}
window.addEventListener('DOMContentLoaded', cropperInstances);.container {
margin: 100px auto;
width: 300px;
height: 300px;
}
img {
max-width: 100%;
}<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Cropper.js</title>
<link rel="stylesheet"
href="https://srv19859.microhost.com.pl/cropper/css/cropper.css">
</head>
<body>
<div class="container">
<img id="image1"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Lion_waiting_in_Namibia.jpg/1200px-Lion_waiting_in_Namibia.jpg">
</div>
<div class="container">
<img id="image2"
src="https://upload.wikimedia.org/wikipedia/de/9/93/Burj_Khalifa.jpg">
</div>
<script
src="https://srv19859.microhost.com.pl/cropper/js/cropper.js"></script>
</body>
</html>My goal is to have these images fill their respective divs while being centered both vertically and horizontally. The challenge is ensuring that:
- If the image has a horizontal orientation, its height cannot exceed the div's height
- If the image has a vertical orientation, its width cannot surpass the div's width.
You can see an example of the desired effect here: Image Example
I've been experimenting with different approaches, but I'm struggling to find a solution. The issue is similar to what's discussed in this post: Panzoom Library and Centered Image Filling Problem