it-swarm.dev

Czy można utworzyć responsywny div z obrazem tła, który zachowuje stosunek obrazu tła jak w przypadku <img>?

Nie jest native speakerem języka angielskiego, więc prawdopodobnie jest lepszy sposób na kształtowanie pytania ... w każdym razie:

To, co chcę utworzyć, jest podobne do nagłówka tutaj: http://thegreatdiscontent.com/adam-lisagor Obraz nagłówka jest wyświetlany w całości na wszystkich ekranach, a proporcje obrazu są oczywiście zawsze poprawne . Robi się to za pomocą i umieszczania tekstu na pozycji używanej: absolutnie.

Ale jeśli użyjesz css dla obrazu tła zamiast an, otrzymasz coś takiego jak ten nagłówek: http://elegantthemes.com/preview/Harmony/ Resize browser, aby pominąć części tła .

Czy jest możliwe, aby stworzyć wygląd div i zachowywać się jak pierwszy link, używając właściwości css background-image jak na drugim łączu? A może muszę zmienić sposób działania całego nagłówka i użyć tła, aby w pełni wyświetlał się na wszystkich ekranach?

Chciałbym mieć tło nagłówka, które nie wypuszcza niczego, ale jest naprawione w ten sposób http://getflywheel.com/ Dotychczas jedynym pomysłem jest stworzenie przezroczystego png, który ma prawidłowy stosunek obraz, a następnie użyj obrazu tła z załączeniem tła: naprawiono. Ale to nie wydaje się zbyt mądre.

Mam nadzieję, że byłam na tyle jasna, że ​​zrozumiem. Z góry dziękuję bardzo!

9
Ketri

Oto miła i prosta wskazówka z tylko css/html:

Składniki

  • Przezroczysty obraz PNG o pożądanym współczynniku (Transparent-ratio-conserver.png)

  • etykietka

  • Różne obrazy dla różnych portów widoku (retina.jpg, desktop.jpg, Tablet.jpg ...)

Chodzi o to, aby otworzyć tag i przypisać mu przezroczysty obraz (z naszym pożądanym współczynnikiem). Dodajemy także class = „responsive-image”, wszystko w HTML.

<img src="img/transparent-ratio-conserver.png" class="responsive-image">

W CSS ustawiamy rozmiar tła, aby pasował do niego, a my wybieramy szerokość naszego obrazu.

.responsive-image{
    width: 100%;
    background-size: 100% 100%;
} 

i wreszcie służymy każdemu portowi widokowemu prawy obraz:

/* Retina display */
@media screen and (min-width: 1024px){
    .responsive-image{
        background-image: url('../img/retina.jpg');
    }
}
/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
    .responsive-image{
        background-image: url('../img/desktop.jpg');
    }
}
/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
    .responsive-image{
        background-image: url('../img/tablet.jpg');
    }
}
/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
    .responsive-image{
        background-image: url('../img/mobile-hd.jpg');
    }
}
/* Mobile LD */
@media screen and (max-width: 350px){
    .responsive-image{
        background-image: url('../img/mobile-ld.jpg');
    }
} 

Możesz pobrać demo z tutaj

19
Yassin

Odbywa się to za pomocą właściwości background-size:

background-size: cover;

Okładka sprawi, że obraz będzie tak mały, jak to tylko możliwe, a jednocześnie pokryje całość swojego rodzica i zachowa proporcje.

Możesz także spróbować contain, co sprawia, że ​​obraz jest tak duży, jak to tylko możliwe, a jednocześnie mieści się wewnątrz rodzica.

Źródło (-a)

MDN - właściwość CSS w rozmiarze tła

3
Bill

Myślę, że jest lepsze rozwiązanie niż contain lub cover (które nie działają dla mnie, btw). Oto przykład, którego ostatnio użyłem do logo:

#logo{
    max-width: 600px;
    min-height: 250px;
    margin: 0 auto;
    background: url(../images/logo.png) no-repeat center;
    background-size: 100%;
}

Więc teraz mamy responsywny div z obrazem backgound, którego rozmiar jest ustawiony na pełną szerokość div.

2
CranK

Wystarczy przekazać stosunek wysokości do szerokości do elementu. Dla obrazu 1400x600;

1400: 600 = 98:42

span( style="padding-bottom:42%;
             width:98%;
             background:url('/images/img1.jpg');
             background-size:contain;
             display:inline-block;")

wyświetlałoby się tak samo jak 

img(src="/images/img.jpg" style="width:98%;") 
0
lonewarrior556

Chociaż istnieją inne rozwiązania. % Skaluje div do rozmiaru obrazu lub współczynnika proporcji.

.responsive-image{
width: 100%;
background-image: url(x.jpg);
background-repeat:no-repeat;
background-size: 100% 100%;

0
rajesh_kw