Адаптивное изображение, размер и размеры - PullRequest
Новая
       33

Адаптивное изображение, размер и размеры

0 голосов
/ 02 мая 2020

Я начинаю использовать адаптивное изображение, и у меня есть небольшое сомнение.

У меня есть значок. Этот значок на моем веб-сайте всегда имеет два размера: небольшую версию, ширину 74 пикселя и большую версию, ширину 94 пикселя. 

<img alt="Sezione Gino" style="background-color: #dd0505" srcset="https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=1&amp;q=75 1x,
https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=2&amp;q=50 2x,
https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=3&amp;q=35 3x,
https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=4&amp;q=23 4x,
https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=5&amp;q=20 5x" sizes="94px" src="https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress">

Я создал с помощью imgix этот srcset для большого значка. Я проверяю изображения, и они корректно изменяются в размере, 1x - это ширина 94 пикселя, 2x - ширина 188 пикселей.

Я установил размеры 94, потому что в большой версии изображение всегда составляет 94px.

Теперь мой вопрос: для 74-пиксельной версии, так что маленькая иконка, я должен воссоздать набор, используя размер 74px?

1 Ответ

0 голосов
/ 06 мая 2020

Да, вам придется воссоздать набор.

Если это один и тот же значок, вы можете просто скопировать и вставить и заменить w=94 на w=74, хотя вам, возможно, также придется настроить высота, чтобы изображение не искажалось.

...