Currently, I am developing an application using asp.net mvc3. My views utilize razor, although this detail isn't crucial at the moment. I wanted to incorporate an image gallery that allows for image deletion and uploading, along with some other functionalities that were not available in existing galleries on the internet. Consequently, I decided to create my own implementation.
One issue I encountered was displaying images in their actual size from thumbnails within the gallery. To illustrate the problem, I devised a simple script:
<!DOCTYPE html>
<html>
<head>
<style>
.thumb-image { cursor: pointer;}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<img src="Forest.jpg" class="thumb-image" alt="Forest" height="300px" width="300px"/>
<script>
$('.thumb-image').click(function(){
$(this).hide();//
});
</script>
</body>
</html>
I employed this script to verify if I could access the image from the DOM (or more precisely, how to access it - given my limited skills in JS/jQuery).
My inquiry is as follows - Forest.jpg is an image stored on my desktop, originally sized 3550x2377px. Although I employ images sourced from a server, no cache is retained. The styling for the <img> tag aims to achieve a thumbnail effect, yet the full-size image is downloaded to the client. Is there a way to display this image at its original dimensions (in this case 3550x2377px) within a <div> tag, without needing an additional server call or by reusing the path to the image but through the full-sized thumbnail? Once CSS adjustments are made to the width and height, is it impossible to revert to the true dimensions?