2

I"m trying to set the flex css property of image containers to the aspect ratio of the image. I want the flex css to be in form flex: 1.798245 with no px or 1 1 1px.

Using jQuery css() method it keeps setting it to flex: 1 1 1.798245px

//gallery flex
$('.gallery-item').each(function(){
  var value = $("img", this).width() / $("img", this).height();
  $(this).css("flex", value);
});

How should I pass value to css() to get the result I want?

Ralphonz
  • 633
  • 1
  • 9
  • 22
  • Flex-grow etc are **not the same as width**. If you want `width`...use that. – Paulie_D Oct 09 '17 at 09:56
  • https://stackoverflow.com/questions/34733955/what-are-the-differences-between-flex-grow-and-width – Paulie_D Oct 09 '17 at 09:57
  • I'm trying to accomplish this: https://codepen.io/blimpage/pen/obWdgp – Ralphonz Oct 09 '17 at 10:02
  • 1
    The value you're seeing is the full correct syntax for the `flex` rule: https://developer.mozilla.org/en-US/docs/Web/CSS/flex. There is nothing wrong with this. If your code is not working as you expect there is another issue which needs addressing – Rory McCrossan Oct 09 '17 at 10:03
  • Since there is no `gallery-item` in the posted code, it is unclear how this is suppose to work, and therefore I decided to deleted my answer. In a comment at my answer you told the _flex-grow_ version doesn't work in Safari, so here is one, w/o the script, https://codepen.io/anon/pen/VMXEbO ... so doesn't that work in Safari? ... And if you want to know _why_ the script based doesn't work, post a code snippet that includes the jQuery script and I'll have a look. – Asons Oct 09 '17 at 12:59

3 Answers3

5

what you want is equivalent to setting the flex-grow attribute:

enter image description here

so what you can do is just set the flex-grow attribute directly:

$(this).css('flex', value + ' 1 0%');

davidchoo12
  • 1,261
  • 15
  • 26
  • 1
    Why does setting `flex-grow` not give me the same result as this: https://codepen.io/blimpage/pen/obWdgp – Ralphonz Oct 09 '17 at 10:09
  • 1
    ah apparently you need the flex-shrink and flex-basis properties to be set as well, so you can do `$(this).css('flex', value + ' 1 0%')` because flex-shrink and flex-basis default values are 1 and 0% respectively – davidchoo12 Oct 09 '17 at 10:17
  • 1
    Funnily enough that worked! For some reason `$(this).css('flex', value + ' 1 0%')` works but setting flex-shrink and flex-basis in my css file then flex-grow via javascript does not work. – Ralphonz Oct 09 '17 at 10:19
1

Set it like this

 $(this).css("flex", value);
Amar Singh
  • 5,464
  • 2
  • 26
  • 55
0

Add px after value variable

$('.gallery-item').each(function(){
  var value = $("img", this).width() / $("img", this).height();
  $(this).css("flex", value); // You had used `:` but should be `,` to separate two arguments.
});
Himanshu Upadhyay
  • 6,558
  • 1
  • 20
  • 33
  • I see my mistake but as the answer above that gives me `style="flex: 1 1 1.7982456140350878px;"` when what i want is `style="flex: 1.7982456140350878;"` with no `px` and no `1 1` – Ralphonz Oct 09 '17 at 10:00