Как правильней задавать изображения для слайдера при верстке, через background или?

Question

[Senseich]

Делаю верстку по макету. Впервые столкнулся со слайдером и собственно появился вопрос. Как лучше будет сделать, вернее даже, как правильнее:
1. Изображения прописать в HTML через тег
2. Либо присвоить класс блоку и в CSS прописать эти изображение как background

Я просто не программист и не знаю как дальше с версткой работают бэкэндеры, что будет для них предпочтительней. Или же это не важно?

Comments

[Kovalsky]

Если вы работаете в команде, то лучше такие вещи всё-таки у команды спрашивать. Вы же для них делаете, они вам расскажут как им удобнее.

[Senseich]

К сожалению, не в команде (

Answer 1

[one_day]

через тег img

Answer 2

[Конан Варвар]

Все конечно зависит от вашего слайдера. Если у вас слайдер картинок, то конечно лучше задавать их через тег img и для красоты отображения задайте след. свойства:

img {
  object-fit: cover;
  object-position: center;
}

Если через background, то след. свойства:

.image {
  background: url() no-repeat center;
  background-size: cover;
}

Comments

[Senseich]

Хм, спасибо. А что за св-ва object-fit и object-position. В первый раз слышу, что-то новое? А как с поддержкой браузеров?

[Конан Варвар]

Вот вам поддержка https://caniuse.com/#search=object-f
Вот вам информация https://developer.mozilla.org/ru/docs/Web/CSS/obje...

[Егор Живагин]

Senseich: пичаль у них с поддержкой
Но они и не обязательны

[Конан Варвар]

Егор Живагин: Спасибо что уточнили, что эти свойства НЕ обязательны.

[Senseich]

Егор Живагин: да, поддержка не очень. А как по другому можно сделать. У меня слайдер на всю ширину, а высотой к примеру 500px . Надо как то сделать чтобы картинка подстраивалась под эту высоту. Если через background, то да, можно применить background-size: cover.
А если через тег img делать, то как ещё можно? )

[Егор Живагин]

Senseich: смотря как она должна подстраиваться.
Если просто не должна вылазить за пределы слайда -

max-height: 100%;
max-width: 100%;

и отцентрировать, на всякий случай, любым удобным способом.

Если картинка обязательно фуллскрин по ширине, а делалями ради этого можно жертвовать:
max-width: 100%;
и центрируем уже по вертикали, например

[Senseich]

А при этом пропорции будут сохранены?

[Егор Живагин]

Senseich: да, мы ведь не задаём размер напрямую, а ограничиваем максимальный

Пример
Чтобы сравнить с cover надо закоментить картинку в html и убрать "//" в style там же

[Senseich]

Ну да, работают почти одинаково, но у cover есть плюс! Когда ширина изображения меньше высоты (на мобильных к примеру), он не уменьшает высоту пропорционально, а начинает скрывать часть картинки по ширине. А с max-width: 100% , картинка начинает уменьшаться по высоте.

[Senseich]

Егор Живагин: А как можно картинку отцентровать, если часть скрыта справа. Т.е. картинка по умолчанию как я понял прижимается к левой части экрана и то что справа уже не видно на мобильном, так как overflow: hidden.
Вот пример если картинка 1920х500 px

img {
height: 300px;
overflow: hidden
}

На экране мобильно видно будет только левую часть картинки, как можно сделать чтобы было видно центральную часть картинки?
Просто в случае через background, там можно выровнять с помощью: center top no-repeat. А вот как быть с <img>, как его выравнивать? )

[Егор Живагин]

Senseich: любым способом выравнивания практически)
1 :
Контейнеру, в котором картинка -

div {
display: flex;
justify-content: center;
//align-items: flex-start; - можно ещё и по-вертикали как угодно ставить
}

Пример (разница видна, если закоментить строку с d...

2:

// Очень древний хак для удобного центрирования всего подряд
img {
position: relative;
left: 50%;
transform: translateX(-50%);
}

У cover , конечно, есть отличительные особенности. При очень большом желании можно и img к такому поведению привести, но... . Каждому свои задачи)
Slick slider , например, с фоновыми изображениями работает только в том случае, если ширина у блоков фиксированная.

[Senseich]

Егор Живагин: 1) Не понял, какую строчку закомментировать в твоем примере? )
2) А почему второй способ древний? Я вчера как раз смотрел много примеров слайдеров на сайтах и много где замечал так делают, только img почему то абсолютом делают.
3) Думаешь флекс уже можно 100% задействовать? )

[Егор Живагин]

Senseich: 1) Строчку с display: flex . и сразу 3) Меня и моих работодателей поддержка flex устраивает, я спокойненько юзаю.
2) Древний - то есть очень давно известен) Абсолютом тоже можно, но не всегда кроссбраузерно и всё таки элемент вырывается из контекста со всеми вытекающими (как минимум, что-нибудь под него заедет). Я предпочитаю relative

[Senseich]

Ок, спасибо! Только с примером не понял, там ничего не меняется если закоментить display: flex )

Answer 3

[cssfish]

если хотите держать все под контролем, то элементом слайдера должны быть блоки, в каждом блоке - по img.
далее никто не мешает простейшим скриптом путь каждой картинки вынести в background каждого блока и навесить cover c центрированием (object-fit хорошо, но рано).

Comments

[Senseich]

А можете пример такого простейшего скрипта, я только начал верстку изучать, до JS ещё не дошел?

[cssfish]

значит рановато вам оно. пользуйте img пока и все

[Senseich]

Да я просто хотел посмотреть как со скриптом это будет работать )

Answer 4

[Антон]

Если в слайдере только картинки - через img
Если в слайде картинка - задний фон, а на переднем плане html блок - лучше через бэкграунд.

Comments

[Senseich]

Ну там собственно есть ещё описание к каждой картинке с кнопкой: https://prnt.sc/gb7eso
Получается, всё же лучше через бэкграунд?

[Антон]

Senseich: Да, у родительского дива бэк, а внутри блок с текстом и кнопками. Нет, можно, конечно, имг через абсолют сделать и поиграться с z индексом, но я бы не стал.

[Senseich]

А вот я смотрел примеры, почему img делают абсолют, а не релейтив? По сути абсолют можно сделать для блока с текстом. Так ведь?

[Антон]

Senseich: или так