Setting flex css with jQuery

Question

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?

Answer 1

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

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

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

Answer 2

像这样设置它

 $(this).css("flex", value);

Answer 3

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.
});