background-size: обложка, заставляющая фоновое изображение быть частично скрытым

0

Я пытаюсь сделать простую целевую страницу, и у меня есть заголовок, контент div с фоновым изображением и нижний колонтитул. Я хочу, чтобы он был отзывчивым, поэтому, чтобы поддерживать размер, я использовал background-image:cover. Теперь проблема в том, что на разных экранах изображение должно масштабироваться настолько, что часть его скрывается, например:

Изображение 174551

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

  • 2
    Итак, независимо от размера экрана или соотношения или соотношения изображений, вы хотите отобразить все изображение без искажений? Вы не можете сделать это. Вы либо искажаете изображение, либо масштабируете и прячете по мере необходимости.
  • 0
    Это то, что я подумал, но можно ли это сделать каким-либо образом, в том числе, скажем, сделать изображение намного больше снизу, чтобы всегда была довольно большая скрытая часть, а текст все еще в порядке?
Показать ещё 5 комментариев
Теги:
background
image

1 ответ

0

Как говорит BenM, вам нужно выбирать между

1) искажение изображения

2) обрезать его с помощью обложки

3) держите пустое пространство по сторонам, используя содержит.

Однако, если ваша проблема заключается в основном в том, что нижняя часть изображения должна всегда отображаться, вы можете установить background-position-y: 100%;

Это гарантирует, что снизу изображение всегда отображается (но будет больше в верхней части...)

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню