Хорошо, Ive работал в html некоторое время, но теперь пытается построить полностью отзывчивый сайт с отзывчивыми изображениями/изменениями в соответствии с устройством. Мне нужно это для клиента и собирался делать со звонками в CSS, но нашел учебник по srcset, утверждающий, что это правильный способ выполнить это.HTML-srcset не работает с использованием w? Не создавать изображение?
Мой человек указал, что они хотят отдельное изображение для загрузки на следующий: - рабочий стол -Iphone 6s -Iphone 6plus/Ipad про -прочее/меньше мобильного
Моего изображения имеет запас 20 px на каждой стороне, то есть мне нужно, чтобы изображение было шириной экрана - 40 пикселей.
Я пошел в https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions и пошел за учебником по набору src и придумал эти размеры, принимая во внимание, когда умножать на 2 или 3 для разрешения (я думаю, что получил ручку о том, как работает пиксель/разрешение):
- рабочего стола: 768px
- IPhone 6s: 670px
- IPhone 6 плюс: 1122px
- другой мобильный: 240px
я тогда писал, прочитав браузер будет переключаться на правильный образ на основе размера экрана:
<img src="/images/home-desktop.jpg" srcset="/images/home-iphone6s.jpg 670w, /images/iphone6plus.jpg 1122w, /images/allMobile.jpg, 240w, /images/home-desktop.jpg 768w">
однако ничто не работает, независимо от того, как я растянуть browser.I получить это:
Что я здесь делаю неправильно? значения с w - это размеры изображений - это не должно быть размером экрана вправо? Как я могу это исправить?
Я попробовал это, я все еще получаю никакого образа – skyguy
@skyguy Какой полный путь к изображению? Это на веб-сервере или на локальном компьютере? –
полный путь - это то, что у меня есть images/home-desktop.jpg, оно локально. Значение по умолчанию (не в srcset) появляется, но только сначала, когда я удаляю косые черты. Почему это – skyguy