@alexeeey_kuznetsov

Уменьшение ширины и высоты блока с изображением до определенной на нужных разрешениях?

5beab65930792831431934.png
Имеется блок с новостями, у каждого имеется изображение новости, дата публикации и заголовок.
Изначально изображение в новости имеет ширину 400px и высоту 170px. При уменьшении разрешения экрана необходимо чтобы изображение уменьшалось также. Это реализовано, правда для экономии времени загрузки интересно, можно ли реализовать уменьшение через background.
Так как условием вёрстки стоит PIxel Perfect, то необходимо чтобы на разрешении экрана 1024px - ширина и высота изображения была 308px на 132px (в моём случае при уменьшении получается 312px на 133px) и на разрешении в 320px изображение имело ширину 280px и высоту 120px и преобразовывалось в слайдер с одним изображением.
Вопрос: можно ли указать определенную ширину и высоту изображения до которого должно уменьшатся изображение без помощи JS и Jquery?Если нет, то какие способы есть с JS и Jquery.
И как лучше реализовывать слайдер(js,jquery) самый банальный c кругами под изображением и возможностью пальцем перелистнуть новость на мобильной версии?
Верстаю на Flexbox. Если есть решение под Flex то вообще отлично, если другой вариант то тоже было бы интересно.
Заранее спасибо за помощь!
UPD:
Попытаюсь донести вопрос поточнее с помощью скриншота
5beb39104c8ad556750700.png
При достижении viewport 1024px у меня размер ужавшегося разрешения получился 312 на 132, а должен согласно первому скриншоту вопроса быть 308 на 132.
Т.е. изначально разрешение 400 на 170. С помощью свойств display:block и width:100% оно растягивается внутри блока с ячейкой новости.
Вопрос состоит в том как достичь именно такой ширины изображения(308px, а не 312px) на этом разрешении(1024px) при ужатии?
https://codepen.io/alexeeey_kuznetsov/pen/JeEzaV"
  • Вопрос задан
  • 1097 просмотров
Пригласить эксперта
Ответы на вопрос 1
zoozag
@zoozag
Opencart
Это реализовано, правда для экономии времени загрузки

- Можете использовать srcset
- Можете использовать background и media queries. Будет загружаться только нужный background

в моём случае при уменьшении получается 312px на 133px

Картинка в вашем случае вообще не уменьшается, вы ее просто тянете.
Чтобы задавать фикс размеры, можете использовать object-fit: cover; для картинки или background-size: cover; для фона.

И как лучше реализовывать слайдер(js,jquery)

js slider
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы