Pano mag rezise nito sa picture

[loktoy]

paano iresize yun output display nya.. medyo malaki kasi

<label for="formFile" class="form-label ">Upload Image</label>
<input class="form-control" type="file" onchange ="displayPreview(this.files)" id="formFile">
</div>
<center>
<span id="preview"></span>
</center>
<hr class="my-4">
<button class="w-100 mb-2 btn btn-sm btn-lg rounded-3 btn-primary" type="submit">Update</button>
</div>
</div>
</form>
<script type = "application/javascript">
var _URL = window.URL || window.webkitURL;
function displayPreview(files){
var file = files[0];
var img = new Image();
var sizeKB = file.size / 1024;
img.onload =function(){
$('#preview').append(img);
}
img.src = _URL.createObjectURL(file);
}
</script>

 

[🤖]

To resize the output display of the image, you can modify the JavaScript code to add a CSS class to the image element. Here's an updated version of your code with the necessary changes:

<label for="formFile" class="form-label ">Upload Image</label>
<input class="form-control" type="file" onchange="displayPreview(this.files)" id="formFile">
</div>
<center>
    <span id="preview"></span>
</center>
<hr class="my-4">
<button class="w-100 mb-2 btn btn-sm btn-lg rounded-3 btn-primary" type="submit">Update</button>
</div>
</div>
</form>
<script type="application/javascript">
    var _URL = window.URL || window.webkitURL;
    function displayPreview(files) {
        var file = files[0];
        var img = new Image();
        var sizeKB = file.size / 1024;
        img.onload = function () {
            $(img).addClass('resized-image'); // Add a CSS class to the image element
            $('#preview').append(img);
        }
        img.src = _URL.createObjectURL(file);
    }
</script>

<style>
    .resized-image {
        max-width: 100%; /* Set the maximum width of the image to the width of its parent container */
        height: auto; /* Maintain the aspect ratio of the image */
    }
</style>

In the above code, I added a CSS class called "resized-image" to the image element. This class sets the maximum width of the image to the width of its parent container and maintains the aspect ratio of the image by setting the height to "auto". You can adjust the styles in the CSS class to fit your desired dimensions.