Я пытаюсь выяснить, как наилучшим образом использовать адаптивные изображения (srcset / размеры), чтобы соответствовать моему шаблону и выбрать правильное изображение для загрузки.
Мой шаблон имеет в основном 3 точки останова: до 1000 пикселей: все в одном столбце, занимающем 100% ширины. До 1600 пикселей: все в двух столбцах с приблизительным соотношением 2/3 - 1/3 выше 1600 пикселей: два столбца 4/5 - 1/5, но внутри первых 4/ 5 столбец у меня поменьше
Для шаблона под 1000px я использую следующие размеры:
(max-width: 1024px) calc(100vw - 20px)
Это прекрасно работает, занимает желаемое пространство, и это легкоодин, потому что мне не нужно принимать во внимание другие столбцы.
Сложная часть проистекает из других, потому что размер изображения внутри одного из столбцов зависит от размера других столбцов.В любом случае я хотел бы, чтобы изображение занимало 100% доступного пространства, но с «размерами» я изо всех сил стараюсь добиться чего-то, что работает.
Для до 1600 пикселей у меня есть:
(max-width: 1600px) 66vw
Это должно соответствовать соотношению, используемому в шаблоне, но на самом деле оно никогда не достигает цели подгонки изображения внутри родительского div.
Для последней точки останова у меня та же проблема, либослишком короткий или слишком большой.
Вот пример изображения:
<amp-img src="https://www.laurentwillen.be/wp-content/uploads/sites/21/2018/05/xiaomi-redmi-note-5-face-up-down.jpg" alt="xiaomi redmi note 5" width="4000" height="1240" class="alignleft size-full wp-image-2620" srcset="https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down.jpg 4000w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-300x93.jpg 300w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-768x238.jpg 768w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-1024x317.jpg 1024w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-1400x434.jpg 1400w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-900x279.jpg 900w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-700x217.jpg 700w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-500x155.jpg 500w" sizes="(max-width: 1024px) calc(100vw - 15px), (max-width: 1600px) 66vw, 50vw" /></amp-img>
Если я подавляю «размеры», это ухудшает его, так как оно отображает изображение в полном размере,AMP требует, чтобы ширина и высота отображались, поэтому я не могу избавиться от этого, и поскольку я использую PHP, я не могу найти ширину и высоту с соответствующими значениями до загрузки страницы.
СделатьУ вас есть предложения?
Спасибо
Лоран