Помощ при програмиране, отговори на въпроси / Css / CSS отговорни BG изображения - css, html5

CSS отговорни BG изображения - css, html5

Опитвам се да създам сайт с пълна ширина на паралакс и да имам проблем да получавам фонови изображения за правилно мащабиране.

Как да получа изображение с пълна ширина в работния плотда се свие и да съдържа 100% широчина, но височината се свива и изображението съдържа пропорции, за да съответства на ширината? Проблемът ми е, че не мога да задам контейнер за фон, който да има максимална височина.

Аз наистина търся път за височинатасе свива от 100% надолу, когато прозорецът за прозорци все по-малък, така че фокусът на картината не се губи и поддържа пропорции, точно както би могъл да реагира.

Опитах се с размер на фона: съдържат, но дори и тогава контейнерът трябва да има фиксирана височина, която трябва да се промени, докато фоновото изображение се свива, защото в противен случай изображението няма да бъде течно с контейнера.

#main-photo {
background-image: url("images/main.jpg");
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin-top: 130px;
height: 100%;
width: 100%;
}

Ако премахна височината, очевидно нищо не се изобразява в браузъра, а максималната височина не работи така, както при реагиращите изображения.

Може ли някой да ми помогне с този ефект?

Отговори:

0 за отговор № 1

Трябва да използвате background-size: contain вместо background-size: cover. Демо тук

#main-photo {
background-image: url("images/main.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
height: 100%;
width: 100%;
}

0 за отговор № 2

Намерих решение, използващо подложка, която добавя височина и позволява на изображението да запази съотношението си. Благодаря ти!

Просто добавете