Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<amp-img> Horizontal Menu with Images of Equal Height and Different Width; please add layout with following properties: width:auto; height:100%; #22748

Open
nakigoe opened this issue Jun 7, 2019 · 5 comments

Comments

@nakigoe
Copy link

nakigoe commented Jun 7, 2019

Академия Накигое Лого Академия Накигое Академия Накигое Лого

Horizontal Menu with Images of Equal Height and Different Width

amp-img
Currently layout="responsive" actually does width:100%; height:auto;

I need a layout with width:auto; height:100%;
the size of a container is set already outside of an image

A work-around combining AMP's fill layout with the object-fit CSS property does not do its job at all!!!
I need the image to expand the parent element horizontally according to the set height.

object-fit and amp-img layout="fill" just shrink the image inside its parent container. I need to expand the width of the parent link element accordingly, to expand the width of the link element together with the image.
Right now object-fit and amp-img layout="fill" workaround just shrink the image inside a link container of a set height

I need a layout="newProperty" for a fixed height top menu, with images of different sizes for every link, the images expanding the width of the element; not the shrinking of the images according to the parent tag size

object-fit and amp-img layout="fill" is a garbage option, takes time and doesn't do what it is promised to do.

Please add a new layout to expand the parent element horizontally according to and with the calculated width of an image inside a parent element of a set height.

right now I'm successfully using a simple math formula for amp-img layout="responsive":

CSS:
#image1 {
width: calc ( ( originalWidthInPixels / originalHeightInPixels ) * requiredHeight ) ;
}

AMP-HTML:
<a>
<div id="image1">
<amp-img layout="responsive" width="originalWidthInPixels" height="originalHeightInPixels">
</amp-img>
</div>
<a>

Академия Накигое Лого Академия Накигое Академия Накигое Лого

@jpettitt
Copy link
Contributor

jpettitt commented Jun 7, 2019

Have you looked at at layout=intrinsic?

@sparhami
Copy link

sparhami commented Jun 10, 2019

We currently do not have a responsive width mode. You can do this with regular CSS, something like:

.responsive-width {
  position: relative;
  height: 100%;
  writing-mode: vertical-lr;
}
<div class="responsive-width">
  <div style="padding-right: calc(100% * 16/9)"></div>
  <amp-img layout="fill" ...></amp-img>
</div>

Here is a JS bin demonstrating the effect without AMP: https://jsbin.com/cesoneweji/edit?html,output. This is something we are considering adding a layout for, but would also like to see this sort of layout implemented in browsers.

/cc @dvoytenko

@dvoytenko
Copy link
Contributor

If an image's container already has the right layout, you can just use layout="fill"

@sparhami
Copy link

Even if we don't want to implement this in AMP, we should at least document how to do it.

@aghassemi aghassemi added Component: amp-img Customer: Developer Type: DevX issues impacting developer experience labels Jun 22, 2019
@nakigoe nakigoe changed the title <amp-img> add layout with following properties: width:auto; height:100%; <amp-img> Horizontal Menu with Images of Different Width and Equal Height; please add layout with following properties: width:auto; height:100%; Apr 24, 2020
@nakigoe nakigoe changed the title <amp-img> Horizontal Menu with Images of Different Width and Equal Height; please add layout with following properties: width:auto; height:100%; <amp-img> Horizontal Menu with Images of Equal Height and Different Width; please add layout with following properties: width:auto; height:100%; Apr 24, 2020
@stale
Copy link

stale bot commented Nov 13, 2022

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants