1

I hope you can help me :)

I want define the height of img, in relation to the 'actual' width of the image. But the width is dynamic, because it is in % of the parent object(Browser window for an wxample) .

Why do I need the height?: Without the height it works fine, but I need it because I want that the top of alle pictures meet at top and my pictures have different proportion. (I know that this will compress the pictures... later I fix this with overflow, after I have an solution for the height problem).

How I imagine, I need something that gives returns me the px of the 'actual'(for an example, after the user changed the size of the browser window) width. And then I can multiply it by 3 and write that to the height. (for an proportion of 1to3)

www139
  • 4,960
  • 3
  • 31
  • 56
Torben
  • 23
  • 4
  • http://bashooka.com/coding/responsive-jquery-image-gallery-plugins/ – mplungjan Nov 20 '14 at 13:26
  • thx for the first answer, but i already have a 'image gallery' ... fancybox. That what I'm looking for is the pictures who are showed on the website directly before somebody clicks it. ... for that im doing a row of 3 or 4 picture. The width is in % of parent table and the table is in % of the 'document'(browser). Anything is fine, I only need a solution for the height if the proportion of the thumbnails is different. Excample(2014.11.20): http://torbenkaehler.de/index.php?content=fotos_halloween_fahrt – Torben Nov 20 '14 at 14:01

1 Answers1

0

This should give you all you need.

var img = document.getElementById('testImage');

// these vars are numbers representing a length in pixel
var w = img.width, h = img.height; // displayed dimensions, change on resize
var nw = img.naturalWidth, nh = img.naturalHeight; // dimensions of the original image file

var proportion = nh / nw; // proportion < 1 : 'portrait', < 1 : 'landscape'

Since width / height change on resize you have to update them in the moment you need them.

Terry
  • 63,248
  • 15
  • 96
  • 118
Martin Ernst
  • 3,199
  • 1
  • 12
  • 12
  • @Terry: Thanks for fixing my typo! – Martin Ernst Nov 20 '14 at 15:54
  • Thx for this good answer. It worked for me generelly(and so it is the answerto my question), but I had the problem that I don't know the Id of all Elements/Images(dynamicly created). But on this way i found this http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout . It is nearly the same question, but the solution goes over css-classes. – Torben Nov 23 '14 at 01:06