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

Question

[alexeeey_kuznetsov]

Имеется блок с новостями, у каждого имеется изображение новости, дата публикации и заголовок.
Изначально изображение в новости имеет ширину 400px и высоту 170px. При уменьшении разрешения экрана необходимо чтобы изображение уменьшалось также. Это реализовано, правда для экономии времени загрузки интересно, можно ли реализовать уменьшение через background.
Так как условием вёрстки стоит PIxel Perfect, то необходимо чтобы на разрешении экрана 1024px - ширина и высота изображения была 308px на 132px (в моём случае при уменьшении получается 312px на 133px) и на разрешении в 320px изображение имело ширину 280px и высоту 120px и преобразовывалось в слайдер с одним изображением.
Вопрос: можно ли указать определенную ширину и высоту изображения до которого должно уменьшатся изображение без помощи JS и Jquery?Если нет, то какие способы есть с JS и Jquery.
И как лучше реализовывать слайдер(js,jquery) самый банальный c кругами под изображением и возможностью пальцем перелистнуть новость на мобильной версии?
Верстаю на Flexbox. Если есть решение под Flex то вообще отлично, если другой вариант то тоже было бы интересно.
Заранее спасибо за помощь!
UPD:
Попытаюсь донести вопрос поточнее с помощью скриншота

При достижении viewport 1024px у меня размер ужавшегося разрешения получился 312 на 132, а должен согласно первому скриншоту вопроса быть 308 на 132.
Т.е. изначально разрешение 400 на 170. С помощью свойств display:block и width:100% оно растягивается внутри блока с ячейкой новости.
Вопрос состоит в том как достичь именно такой ширины изображения(308px, а не 312px) на этом разрешении(1024px) при ужатии?
https://codepen.io/alexeeey_kuznetsov/pen/JeEzaV"

Comments

[Dies Irae]

Можете залить на codepen/jsfiddle?

[alexeeey_kuznetsov]

Dies Irae, https://codepen.io/alexeeey_kuznetsov/pen/jQyVVE
Не понимаю почему не прикрепилась в основном сообщении ссылка..

Answer 1

[zoozag]

Это реализовано, правда для экономии времени загрузки

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

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

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

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

js slider

Comments

[alexeeey_kuznetsov]

Спасибо за ответ!

Чтобы задавать фикс размеры

Вот здесь до сих пор не ясно, т.е. мне необходимо чтобы картинка на разрешении в 1024px пришла к конкретной ширине и высоте. Т.е. растяжение cover сейчас по сути и так действует со 100% шириной изображения на блоке. И как прийти к конкретной до сих пор не понял.

[zoozag]

alexeeey_kuznetsov,

width: 100%;
height: 132px;
object-fit: cover;

Управлять шириной нужно не для картинки, а для самого блока с новостью, иначе она у вас будет не на всю ширину.

[alexeeey_kuznetsov]

zoozag, https://codepen.io/alexeeey_kuznetsov/pen/jQyVVE
Скорее всего не так что-то сделал. Заключил изображение новости в блок - добавил ей 3 данных свойства и теперь они не сжимаются впринципе а при схлопывании переносятся.