Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
AMP Applies CSS to all images in content so they take up 100% width #1182
I created this issue as requested, which is linked to my previous problem
There should be a way to tell AMP to ignore images. I'm new to this code, and am using the wordpress plugin. So I'm trying to not have to modify it since we will lose the ability to update.
So perhaps I am missing something. Perhaps there is already a way to fix this.
If your images do not have a width or a height, console will give you a warning and a red dot will surround the enlarged image.
After applying a width and a height to my png, the image is still enlarged.
After changing it to an SVG, the image is enlarged but put inside of a grey circle and cut off.
It takes bigger size because it's marked as
There are other options as well, such as using
Well, when you use a RWD layout, in order to keep the proper aspect ratio of an image or video, and avoiding the "jump" or flash effect, is always a need to set a width height, in order to precalculate the DAR and to scale accordingly.
Thank you. I will set a width and height to that image.
One problem is that we're using the wordpress plugin, and so I can't just make code changes.
The wordpress app automatically creates the html. I will figure something out though.
But basically the wordpress guys need to come up with some way to give an image a certain attribute so that the plugin knows to make it a fixed image.
I will bring this up on the plugin page.
Ignoring the Wordpress issue for now, I still think there's an issue here for when you have images that are too large for some viewports but too small for others.
Without AMP you'd just set max-width of 100% and height of auto so original image size is used until the viewport is too small and then the image is shrunk as appropriate, in ratio, for smaller screens.
I can't find a way to replicate this in AMP documents since AMP explicitly sets the height and width. I do not want smaller images stretched for larger viewports (so can't use layout="reponsive"), but I also do not want them them to be larger than the viewport for smaller viewports either (so can't use layout="fixed").
@dvoytenko you mentioned in your original reply about limiting the parent container size but do you have an example on how to do this? I'm guessing I need to create a parent div element and use CSS to set the height and width in CSS, but this is complicated to do, as need to create a div on an image by image basis.
It would be much nicer if there was a "responsive-capped" layout type which is capped at original image dimensions (as specified in the height and width for that AMP element) but can shrink smaller than that when necessary. The DAR should still be able to be calculated without downloading the image since you will know the original height and width (as these are mandatory for amp-img) and you know the width so browser can scale height appropriately.
@bazzadp, relying on the physical width (e.g. via
I put all of these examples in the http://jsbin.com/dekavu/edit?html,output
Depending on your exact case, one of these might be more convenient than others. But they are all fine. And there are many other variations that one could come up with, such as using media queries and so on. And
Hope this helps.