CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Adam James
Adam James

Reputation: 4191

How to stretch image in img tag larger than its natural size?

If I have a N pixel by N pixel image, how do I use CSS/JS/jQuery to make it fill a say... 2N pixel by 2N pixel space?

Details: I'm more of a back-end developer but I'm currently implementing a "zoom in" functionality where you click on an image and it then replaces it with a larger image that then resizes the <div> the <img> tag is in to take up more space and effectively 'zoom in' (or really just unsquish a large image).

What I need to do (UX): While waiting for the larger image to load I want the user to be able to still 'zoom' but since the larger image has yet to load they would just get a grainy version of the image until it is then replaced with the higher resolution image.

Upvotes: 0

Views: 1313

Answers (3)

Shikkediel
Shikkediel

Reputation: 5205

I put something together using toggleClass, transform: scale and transition.

Clicking the image will resize it in one second, meanwhile the larger image is loaded. It will then either pick the point when the transition has ended or in case it takes longer to load the image than the duration of the transition, append the image when it has finished loading. Switching during the transition would be overly complicated, I tried that at first. Also put in a check with addClass on the parent so it will only load the larger image once and not on each toggle to enlarge.

Pen

$('div').click(function() {

  var div = $(this),
  img = div.find('img'),
  path = img[0].src.replace('.jpg', ''),
  ended, loaded;

  img.toggleClass('zoom');

  if (!div.hasClass('large')) {

    div.addClass('large');

    var big = new Image();
    big.src = path + '_large.jpg';

    img.one('transitionend', function() {

      ended = true;
      if (loaded) replaceImage(big);
    });

    $(big).one('load', function() {

      loaded = true;
      if (ended) replaceImage(big);
    });
  }

function replaceImage(grand) {

  if (img.hasClass('zoom')) $(grand).addClass('zoom');

  div.html(grand);
}
});
body {
  text-align: center;
  background: grey;
  overflow: hidden;
}

div {
  display: inline-block;
}

div img {
  width: 400px;
  -webkit-transition: -webkit-transform 1s linear;
  transition: transform 1s linear;
  -webkit-transform-origin: center top;
  transform-origin: center top;
}

.zoom {
  -webkit-transform: scale(2);
  transform: scale(2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <img src="//www.anony.ws/i/2015/11/19/yosemite.jpg" alt="">
</div>

It takes the path from the original image and adds _large to it. So in this scenario the images would have to be in the same folder and basically named the same apart from that extra extension.

Edited to make sure the zoom class only gets applied when the original image also has it. This takes care of a glitch when the user clicks multiple times before the large version was loaded.

Upvotes: 2

vpedrosa
vpedrosa

Reputation: 811

This may work:

var img = $("img");
$("div").click(function()
{
    img.css("width",img.width()*2);
    img.css("height",img.height()*2);
}

Upvotes: 2

Marat Tanalin
Marat Tanalin

Reputation: 14123

Change the width and height attributes of the IMG element accordingly.

Alternatively, use CSS properties of the same name. Note that in CSS, width and height must have units (for images, it is typically px).

Upvotes: 3

Related Questions