Phantomjs: CSS property object-fit : contain is not working in phantomjs

0

sbsomya picture sbsomya  ·  27 May 2016

All comments

0

Ok.

vitallium picture vitallium  ·  2 Jun 2016
1

Why was this closed? Still looks broken on 2.1.1

kjantzer picture kjantzer  ·  15 Sep 2016
0

Any alternative to this?

jorchg picture jorchg  ·  26 Sep 2016
0

@jorchg The alternative I went with was using background-image and background-size instead of an <img> and object-fit

kjantzer picture kjantzer  ·  26 Sep 2016
1

Can I ask again why this was closed? This is a very useful CSS property and it would be great if PhantomJS supported it.

Ugoku picture Ugoku  ·  28 Feb 2017
0

@Ugoku because this issue has only title and zero useful info.

vitallium picture vitallium  ·  28 Feb 2017
1

@Vitallium The title seems pretty self explanatory to me. The css object-fit: contain doesn't function like it should.

kjantzer picture kjantzer  ·  28 Feb 2017
0

@kjantzer we have a template to report issue. This template helps us a lot in fixing problems. Plus, writing a a simple example that reproduces a problem helps a lot.

And I think this problem is fixed in 2.5 beta version.

vitallium picture vitallium  ·  28 Feb 2017
1

@Vitallium I understand. It's hard to expect an outside user to use your "template to report" though when there doesn't seem to be documentation on it. Couldn't you have just tagged it with the "Unclear" or "Need more information" label?

kjantzer picture kjantzer  ·  28 Feb 2017
1

@kjantzer our template uses the GitHub reporting system: when you click on "Create a new issue", this template will be in your text field.

Couldn't you have just tagged it with the "Unclear" or "Need more information" label?

I think I'll tag it as probably fixed in 2.5 milestone. And I'll check it later.

vitallium picture vitallium  ·  28 Feb 2017
0

Thanks for the update!

Ugoku picture Ugoku  ·  28 Feb 2017
0

Plus, writing a a simple example that reproduces a problem helps a lot.

Here's my situation:

HTML:
<img src="http://lorempixel.com/900/450/">

CSS:

img {
    height: 450px;
    object-fit: contain;
    width: 600px;
}

The loaded image is the same height as the height assigned to the img tag, but it is wider than the tag. Without object-fit, it is stretched to fit the tag. With object-fit, it will fit the container with the top and bottom empty.

Attached is a test case: objectfit.txt (as .txt because GitHub doesn't allow .html upload)

Ugoku picture Ugoku  ·  3 Mar 2017