cropit
cropit copied to clipboard
Published
20 hours ago •
scottcheng
scottcheng
Images become very small when used inside a Foundation modal
Hi i am using cropit plugin inside a foundation modal.when i load big images ,the images become very tiny in the preview area. couldn't figure out why it is happening ,plz help me.
<!DOCTYPE html>
<html class="no-js" lang="en" >
<head>
<title>Foundation 4</title>
<link rel="stylesheet" href="css/foundation.css">
<style>
.cropit-preview {
width:400px;
height:300px;
}
</style>
<script src="js/vendor/custom.modernizr.js"></script>
</head>
<body>
<div id="myModal" class="reveal-modal" >
<div class="image-editor">
<input type="file" class="cropit-image-input">
<div class="cropit-preview"></div>
<div class="image-size-label">
Resize image
</div>
<input type="range" class="cropit-image-zoom-input">
<button class="export">Export</button>
</div>
<a class="close-reveal-modal">×</a>
</div>
<a href="#" id="click" >Click Me For A Modal</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="jquery.cropit.js" ></script>
<script>
$('#click').on('click',function(){
$('#myModal').foundation('reveal','open');
$('.image-editor').cropit({
imageState: {
src: 'http://lorempixel.com/500/400/',
}
});
});
$('.close-reveal-modal').on('click',function(){
$('#myModal').foundation('reveal','close');
});
</script>
</body>
</html>
Plz find the image and give some input
This probably has to do with the global image styles Foundation sets. Try giving the preview image: max-width: none; Foundation sets max-width standard to 100%.
.cropit-preview-image { max-width: none; }
