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

[nakigoe]

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]

Have you looked at at layout=intrinsic?

[sparhami]

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]

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

[sparhami]

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

[stale]

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.