CSS: адаптивная высота фонового изображения

Question

CSS: адаптивная высота фонового изображения

0

Я использую этот CSS:

.wrap {
    max-width:1400px;
    min-width:768px;
    width:100%;
    background-repeat: no-repeat scroll;
    background-position: center top;
    position: relative;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.image {
    width: 100%;
    height: 600px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Чтобы центрировать изображение и масштабировать его на основе размера окна, остановите масштабирование на 768 пикселей. Я не могу отобразить нижнюю часть изображения, когда окно имеет больший размер (он отлично работает, когда окно минимизировано). Когда я изменяю высоту класса .image до более чем 600 пикселей, он разбивает масштаб изображения...

Вот демонстрация проблемы: http://jrbaldwin.com/css_issue/

alyx 13 дек. 2013, в 21:27

Источник

0

Попробуйте background-position: center center;background-repeat: no-repeat; background-size: contain; по классу .image и min-width: 100%; для класса .wrap - выглядит правильно для меня в FF.
Chris Baker 13 дек. 2013, в 20:32

Теги:

html

css

background-image

4 ответа

1

Попробуйте эти стили:

.image{
  width: 100%;
  height: 600px;
  max-height: 1000px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  max-height: 1000px;
}

Основная идея состоит в том, чтобы использовать свойство "содержать"
Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

Slawa Eremkin 13 дек. 2013, в 19:04

1

Используйте фон-размер: используйте вместо крышки.

Mr. Mayers 13 дек. 2013, в 17:56

1

Основываясь на ответе @jtlowe, не могли бы вы добиться правильного эффекта, используя background-size: contain вместо этого, вместо этого?

Поскольку вы уже твердо находитесь в домене CSS3, вы можете создать медиа-запрос, который использует cover в окнах меньшего размера.

Lasse 13 дек. 2013, в 17:52

0

Да, но как только ширина станет достаточно большой, чтобы «вместить» изображение, изображение может больше не увеличиваться.
jtlowe 13 дек. 2013, в 20:28
0

Это не может быть проблемой здесь, потому что ширина контейнера имеет максимальную ширину 1400 пикселей;
jtlowe 13 дек. 2013, в 20:31
0

@jtlowe: Действительно, моя мысль точно!
Lasse 13 дек. 2013, в 20:33

Показать ещё 1 комментарий

Ещё вопросы

Попробуйте background-position: center center;background-repeat: no-repeat; background-size: contain; по классу .image и min-width: 100%; для класса .wrap - выглядит правильно для меня в FF.
Да, но как только ширина станет достаточно большой, чтобы «вместить» изображение, изображение может больше не увеличиваться.
Это не может быть проблемой здесь, потому что ширина контейнера имеет максимальную ширину 1400 пикселей;
@jtlowe: Действительно, моя мысль точно!

jtlowe · Accepted Answer · 2013-12-13T17-27-00.000Z

Я думаю, что это не масштабирование, потому что высота остается фиксированной. Например, установите высоту.image 1000px. Он должен увеличить изображение, чтобы покрыть 1000 пикселей, чтобы он заполнял всю высоту 1000 пикселей в любое время, независимо от ширины изображения.

Возможно, попробуйте:

размер фона: 100%; background-repeat: no-repeat;