ampproject / ampproject/amphtml
Carousel does not support image media attributes/queries
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
When using `` and using a slide with two images, designated by media queries `` , the image that does not satisfy the original media query never renders.
Once the screen is resized, the second image should show, however, it never does.
**Simple example [here](https://playground.amp.dev/?mode=Responsive#share=PCFkb2N0eXBlIGh0bWw+CjxodG1sIOKaoT4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0idXRmLTgiPgogIDx0aXRsZT5NeSBBTVAgUGFnZTwvdGl0bGU+CiAgPGxpbmsgcmVsPSJjYW5vbmljYWwiIGhyZWY9InNlbGYuaHRtbCIgLz4KICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLG1pbmltdW0tc2NhbGU9MSxpbml0aWFsLXNjYWxlPTEiPgogIDxzdHlsZSBhbXAtYm9pbGVycGxhdGU+Ym9keXstd2Via2l0LWFuaW1hdGlvbjotYW1wLXN0YXJ0IDhzIHN0ZXBzKDEsZW5kKSAwcyAxIG5vcm1hbCBib3RoOy1tb3otYW5pbWF0aW9uOi1hbXAtc3RhcnQgOHMgc3RlcHMoMSxlbmQpIDBzIDEgbm9ybWFsIGJvdGg7LW1zLWFuaW1hdGlvbjotYW1wLXN0YXJ0IDhzIHN0ZXBzKDEsZW5kKSAwcyAxIG5vcm1hbCBib3RoO2FuaW1hdGlvbjotYW1wLXN0YXJ0IDhzIHN0ZXBzKDEsZW5kKSAwcyAxIG5vcm1hbCBib3RofUAtd2Via2l0LWtleWZyYW1lcyAtYW1wLXN0YXJ0e2Zyb217dmlzaWJpbGl0eTpoaWRkZW59dG97dmlzaWJpbGl0eTp2aXNpYmxlfX1ALW1vei1rZXlmcmFtZXMgLWFtcC1zdGFydHtmcm9te3Zpc2liaWxpdHk6aGlkZGVufXRve3Zpc2liaWxpdHk6dmlzaWJsZX19QC1tcy1rZXlmcmFtZXMgLWFtcC1zdGFydHtmcm9te3Zpc2liaWxpdHk6aGlkZGVufXRve3Zpc2liaWxpdHk6dmlzaWJsZX19QC1vLWtleWZyYW1lcyAtYW1wLXN0YXJ0e2Zyb217dmlzaWJpbGl0eTpoaWRkZW59dG97dmlzaWJpbGl0eTp2aXNpYmxlfX1Aa2V5ZnJhbWVzIC1hbXAtc3RhcnR7ZnJvbXt2aXNpYmlsaXR5OmhpZGRlbn10b3t2aXNpYmlsaXR5OnZpc2libGV9fTwvc3R5bGU+PG5vc2NyaXB0PjxzdHlsZSBhbXAtYm9pbGVycGxhdGU+Ym9keXstd2Via2l0LWFuaW1hdGlvbjpub25lOy1tb3otYW5pbWF0aW9uOm5vbmU7LW1zLWFuaW1hdGlvbjpub25lO2FuaW1hdGlvbjpub25lfTwvc3R5bGU+PC9ub3NjcmlwdD4KICA8c2NyaXB0IGFzeW5jIHNyYz0iaHR0cHM6Ly9jZG4uYW1wcHJvamVjdC5vcmcvdjAuanMiPjwvc2NyaXB0PgogIDxzY3JpcHQgYXN5bmMgY3VzdG9tLWVsZW1lbnQ9ImFtcC1jYXJvdXNlbCIgc3JjPSJodHRwczovL2Nkbi5hbXBwcm9qZWN0Lm9yZy92MC9hbXAtY2Fyb3VzZWwtMC4yLmpzIj48L3NjcmlwdD4KICA8c3R5bGUgYW1wLWN1c3RvbT4KICAgIGgxIHsKICAgICAgbWFyZ2luOiAxcmVtOwogICAgfQogIDwvc3R5bGU+CjwvaGVhZD4KPGJvZHk+CiAgPGFtcC1jYXJvdXNlbCBjb250cm9scyB3aWR0aD0iNDUwIiBoZWlnaHQ9IjMwMCIgbGF5b3V0PSJyZXNwb25zaXZlIiB0eXBlPSJzbGlkZXMiIHJvbGU9InJlZ2lvbiIgYXJpYS1sYWJlbD0iQmFzaWMgY2Fyb3VzZWwiPgogICAgPGRpdiBpZD0ic2xpZGUtMSI+CiAgICAgIDwhLS0gZmlyc3Qgc2hvdWxkIHNob3cgb24gbW9iaWxlLCBzZWNvbmQgaW1hZ2Ugc2hvdWxkIHNob3cgb24gZGVza3RvcCAtLT4KICAgICAgPGFtcC1pbWcgaWQ9Im1vYmlsZS1pbWFnZSIgbWVkaWE9IihtYXgtd2lkdGg6NjQ5cHgpIiBzcmM9Ii9zdGF0aWMvaW5saW5lLWV4YW1wbGVzL2ltYWdlcy9pbWFnZTIuanBnIiBsYXlvdXQ9ImZpbGwiPjwvYW1wLWltZz4KICAgICAgPGFtcC1pbWcgaWQ9ImRlc2t0b3AtaW1hZ2UiIG1lZGlhPSIobWluLXdpZHRoOjY1MHB4KSIgc3JjPSIvc3RhdGljL2lubGluZS1leGFtcGxlcy9pbWFnZXMvaW1hZ2UxLmpwZyIgbGF5b3V0PSJmaWxsIj48L2FtcC1pbWc+CiAgICAgIDwhLS0gaG93ZXZlciwgb25seSB0aGUgZmlyc3QgaW1hZ2UgaXMgZXZlciBsb2FkZWQsIGJhc2VkIG9uIHRoZSBzaXplIG9mIHRoZSBzY3JlZW4gZHVyaW5nIGxvYWQuICBUaGUgc2Vjb25kIHNpemUgb2YgdGhlIGltYWdlIGlzIG5ldmVyIGxvYWRlZCAtLT4KICAgIDwvZGl2PgogICAgPGRpdiBpZD0ic2xpZGUtMiI+CiAgICAgIDxhbXAtaW1nIHNyYz0iL3N0YXRpYy9pbmxpbmUtZXhhbXBsZXMvaW1hZ2VzL2ltYWdlMy5qcGciIGxheW91dD0iZmlsbCI+PC9hbXAtaW1nPgogICAgPC9kaXY+CiAgPC9hbXAtY2Fyb3VzZWw+CjwvYm9keT4KPC9odG1sPg==).**
Additionally, trying to use a srcset does not work, only the original src value takes over.
This would seem like a big issue considering people often use different images of different dimensions on mobile.
Contributor guide
Assessment
This issue has not been assessed yet.