CSS: Отзывчивый фон высота изображения

Я использую этот CSS: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; 
}

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

Вот демо задачи: http://jrbaldwin.com/css_issue/

источник

2013-12-13 alyx

Try 'фон положение: центр-центр, фон-повторить: не повторять ; background-size: содержать; 'в классе' .image' и 'min-width: 100%;' для класса '.wrap' - смотрит прямо на меня в FF. –

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

Возможно попробовать:

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

источник

2013-12-13 20:23:05 jtlowe

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

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

источник

2013-12-13 20:26:34 Lasse

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

Это, возможно, не проблема, потому что ширина контейнера имеет максимальную ширину 1400 пикселей; – jtlowe

@jtlowe: Действительно, моя мысль точно! – Lasse

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

источник

2013-12-13 20:27:15

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

.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

источник

2013-12-13 20:30:10

CSS: Отзывчивый фон высота изображения

ответ

Смежные вопросы