Выровнять часть изображения

Question

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

Я пытался прояснить этоизображение:

Итак, красная рамка - это целое изображение (оно имеет ширину 4000 пикселей), но на нем есть только один основной элемент.В моем случае фото девушки.Фон (все внутри красной рамки, кроме зеленой) заполнен цветами.Что я хочу, так это быть девушкой (зеленая кайма), чтобы она всегда была в центре.И в зависимости от размера окна, цветы должны быть более или менее видимыми (но без полосы прокрутки).

Но я понятия не имею, как это сделать ... У кого-нибудь есть совет?

Answer 1

Если это одно декоративное изображение, то вы можете использовать:

background-image: url(whole.jpg) 50% 50% no-repeat

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

Если вы хотите использовать отдельный <img> для девочки и отдельное изображение для цветов, то используйте один из обычных хаков с вертикальным CSS-центрированием для <img>, например.

#container {position:relative; overflow:hidden}
#container img {position:absolute; top:50%; left:50%; 
    margin-top:-half-of-image-in-px; margin-left:-half-of-the-image-in-px;}

и прежний стиль фона.

Если вы хотите быть передовым, вы можете использовать CSS3-объектное свойство .

Answer 2

Если девушка находится в центре картинки, это не должно быть проблемой.Просто используйте изображение как background-image вашего body.С помощью CSS3 вы можете сделать так, чтобы фон был изменен по всей ширине экрана.Используйте background-size: contain;, если соотношение сторон контейнера равно отношению изображения.Если это не так, и вы все еще хотите заполнить все окно, не обрезая изображение, используйте background-size: cover;.Другая возможность заключается в использовании background-size: 100% auto;.

Подробнее о CSS3 background-size здесь

В идеале было бы лучше иметь девушку в качестве отдельного изображения ифон как шаблон, так что вы можете использовать шаблон с repeat-x и девушкой в ​​другом контейнере, даже если вы можете иметь несколько фонов с помощью CSS3.НО, делая это (т.е. различные контейнеры для разных фонов), вы получите лучшую межбраузерную поддержку.