0

This is a continuation of CSS Display an Image Resized and Cropped. The answer there seems to be okay for that user but I need some help to improve upon that answer...

Q: how can the resize (scale) be related to the size of the image at runtime. i.e. I don't want to hard code something like "width: 320px; height: 221px;" in the style - that works if you know the dimensions of the image up front.

Here are some jsfiddles:

http://jsfiddle.net/VdX68/ - based on the original thread answer. Works if you know the dimension of the image up front.

http://jsfiddle.net/VdX68/4/ - you don't have to know the dimension of the image, but only works for 100% scale. (here I simply removed the width, hight from the .scalePan class.

http://jsfiddle.net/VdX68/2/ - using width and hight as %. This scales the image to the size of the containng div not the image original dimensions.

I'm looking for a way to scale the image to a % of the original dimensions, not a % of the container it is in.

Any help much appreciated.

Community
  • 1
  • 1
user1474617
  • 1
  • I found another article which seems to work on IE and Chrome but not Firefox. It uses css zoom. (http://stackoverflow.com/questions/8397049/css-image-resize-percentage-of-itself?rq=1). I may have to go with the limitation. – user1474617 Jun 22 '12 at 13:01

1 Answers1

-1

I understand you want to do this, but I'm not completely sure.

$(document).ready(function() {
    var wdth = $('img').width();
    var hght = $('img').height();

    $('img').css('width',  wdth / 100 * 90 + "px"); // new width is 90% width of image
    $('img').css('height', hght / 100 * 70 + "px"); // new height 70% height of image
});

Working example: http://jsfiddle.net/VdX68/18/

You don't have to use JQuery, you can do this with regular javascript also.

madeye
  • 1,398
  • 3
  • 15
  • 33
  • That may work, but it isn't a pure CSS solution and assumes the use of jQuery – saluce Jun 22 '12 at 12:25
  • @saluce So? You don't have to use Jquery, he can use regular javascript to accomplish the same result. He didn't explicitly said in his question that he wouldn't want to solve this problem with js, maybe he didn't know that this can be done by javascript! – madeye Jun 22 '12 at 12:28
  • @anel_b that works for the .scalePan class but it stops the .crop class working!?!? – user1474617 Jun 22 '12 at 12:38
  • @all I'd love to do this with CSS only - but if using javascript (including jQuery) is the only way I'll use that. p.s. just to clarify this answer does not work even using jQuery, see my above note. – user1474617 Jun 22 '12 at 12:42
  • @user1474617 the crop class isn't working because i've deleted overflow: hidden. Just put that in crop class and it should work .crop { width: 200px; height: 150px; overflow: hidden } – madeye Jun 22 '12 at 13:02