ampproject / ampproject/amphtml
<amp-img> Horizontal Menu with Images of Equal Height and Different Width; please add layout with following properties: width:auto; height:100%;
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
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:
``
`
``
``
`
``
Contributor guide
Research direction
Start by reviewing the amp-img layout implementation and its tests, especially the existing responsive and fill layouts. Compare their behavior with the requested width:auto and height:100% menu case. Done means a documented layout behavior that expands each parent link to the image's calculated width while preserving the fixed height, with tests covering different image aspect ratios.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100