Изображения WordPress не отображаются корректно, в ответе они получают фиксированные высоту и ширину
Я нахожусь в процессе создания нового сайта с использованием WordPress 4.6.1. Из коробки он поддерживает адаптивные изображения.
Я создал новую тему и просто добавил цикл для отображения содержимого сообщения.
Когда я вставляю изображение в сообщение, оно отображает изображение правильно, но оно не реагирует, то есть не отображает другое изображение в зависимости от размера браузера.
Сгенерированный HTML-код изображения выглядит следующим образом:
`<img
width="1110"height="740"src="http://digitaltestsite2.biz/wp-content/uploads/2016/08/Feature-Story-1110x740.jpg"class="attachment-large size-large wp-post-image"alt="Feature Story"srcset="/wp-content/uploads/2016/08/Feature-Story-1110x740.jpg 1110w,
/wp-content/uploads/2016/08/Feature-Story-600x400.jpg 600w,
/wp-content/uploads/2016/08/Feature-Story-768x512.jpg 768w,
/wp-content/uploads/2016/08/Feature-Story-250x167.jpg 250w,
/wp-content/uploads/2016/08/Feature-Story-500x333.jpg 500w,
/wp-content/uploads/2016/08/Feature-Story-350x233.jpg 350w,
/wp-content/uploads/2016/08/Feature-Story-700x466.jpg 700w,
/wp-content/uploads/2016/08/Feature-Story.jpg 1200w
"sizes="(min-width:1199px) 1110px,
(min-width:991px) 768px,
(min-width:767px) 590px,
(min-width:543px) 500px,
295px
"`
(N.B. Я добавил фильтр для атрибута размеров, чтобы включить больше точек останова.)
Если я уберу ширину и высоту, изображение будет отзывчивым, но WordPress, кажется, генерирует это, так что я не верю, что мне придется его удалять.
Я попробовал и повторил это в Chrome и Firefox.
Есть ли у кого-нибудь какие-либо предложения относительно того, является ли это правильным поведением и / или я делаю что-то не так?
Спасибо заранее за любые данные.
Решение
Тестирование этого материала может быть сложным. Например, однажды Chrome (и я думаю, что Firefox и Safari тоже) имеют ресурс, который больше чем они нуждаются в кеше, они не будут загружать меньшие по сети. Для двоих, sizes может быть чертовски сложным, чтобы мысленно моделировать …
Исправление путем удаления width а также height не имеет смысла, так как я считаю, разобрали sizes размер козыри width когда приходит время определить ширину макета и какой ресурс загрузить из srcset,
Я предлагаю:
- Попробуйте очистить кеш между тестами
- Даже если это решит это … всякий раз, когда вы делаете что-то с адаптивными изображениями, подающими вашу страницу в https://ausi.github.io/respimagelint/ это всегда хорошая идея!
Другие решения
Других решений пока нет …