изображение нет отзыв когда экран размер меняется.

-1

Я пытаюсь сделать изображение отзывчивым, но когда я тестирую его с разными размерами экрана, он отсекает часть изображения. Мой CSS довольно прямолинейный, как показано ниже. Вот мой codepen изображение нет отзыв когда экран размер меняется.

.mainImage { 
    position: relative; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: top center; 
    background-attachment: fixed; 
    width: 100%; 
    min-width: 100%; 
    margin-right: 0; 
    margin-left: 0; 
    height: 600px; 
    margin-top: -85px; 
    background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg) 
}

Что мне не хватает или может делать неправильно?

источник

2017-01-13 Nofel

Какие части изображения обрезаются, но должна оставаться внутри? Вы также можете использовать 'background-size: contains' для принудительного отображения изображения. –

- это [это] (http://codepen.io/anon/pen/GrqvGW), чего вы пытаетесь достичь? – Lal

@KeesvanLierop больше правой стороны, но оба они отрезаны – Nofel

вы настройка Вы все «background-» части первой, а затем определение «фон» в сокращенном, который перезаписи. Изменить порядок ...

.mainImage { 
position: relative; 
background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg) 
background-repeat: no-repeat; 
background-size: cover; 
background-position: top center; 
background-attachment: fixed; 
width: 100%; 
min-width: 100%; 
margin-right: 0; 
margin-left: 0; 
height: 600px; 
margin-top: -85px; 
}

Или не использовать сокращенную ...

background-image: url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg)

источник

2017-01-13 16:29:27

попробуйте добавить следующее:

background-size: 100% 100%;

источник

2017-01-13 16:20:31 Achmed

Он работает, но он сжимает мое изображение. – Nofel

Возможный 'размер фона: 100vw;' – Achmed

Вы также можете использовать background-size: contain вместо крышки, чтобы заставить изображение полностью отобразить.

cover полностью заполнит весь фон.

contain будет убедиться, что все изображение отображается внутри элемента

Кроме того, необходимо применить эти свойства фона для укладки после основной фон в стиле.

Итак:

.mainImage { 
    position: relative; 
    width: 100%; 
    min-width: 100%; 
    margin-right: 0; 
    margin-left: 0; 
    height: 600px; 
    margin-top: -85px; 
    background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg); 
    background-repeat: no-repeat; 
    background-size: contain; 
    background-position: top center; 
    background-attachment: fixed; 
}

источник

2017-01-13 16:22:11

изображение нет отзыв когда экран размер меняется.

ответ

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