Obraz tła o szerokości 100% z wysokością „auto”

89

Obecnie pracuję nad mobilnym landingiem dla firmy. To naprawdę podstawowy układ, ale pod nagłówkiem znajduje się zdjęcie produktu, który zawsze będzie miał 100% szerokości (projekt pokazuje, że zawsze przechodzi od krawędzi do krawędzi). W zależności od szerokości ekranu wysokość obrazu oczywiście odpowiednio się dostosuje. Pierwotnie zrobiłem to z img (z szerokością CSS 100%) i działało świetnie, ale zdałem sobie sprawę, że chciałbym używać zapytań o media, aby wyświetlać różne obrazy na podstawie różnych rozdzielczości - powiedzmy mały, średni i na przykład duża wersja tego samego obrazu. Wiem, że nie możesz zmienić img src za pomocą CSS, więc pomyślałem, że powinienem użyć tła CSS dla obrazu, a nie tagu img w HTML.

Nie wydaje mi się, aby to działało poprawnie, ponieważ element div z obrazem tła wymaga zarówno szerokości, jak i wysokości, aby wyświetlić tło. Mogę oczywiście użyć „width: 100%”, ale co mam użyć do określenia wysokości? Mogę ustawić losową stałą wysokość, na przykład 150 pikseli, a następnie mogę zobaczyć górne 150 pikseli obrazu, ale to nie jest rozwiązanie, ponieważ nie ma stałej wysokości. Po zabawie stwierdziłem, że gdy pojawi się wysokość (testowana przy użyciu 150px), mogę użyć parametru „background-size: 100%”, aby prawidłowo dopasować obraz w elemencie div. Mogę użyć nowszego CSS3 do tego projektu, ponieważ jest przeznaczony wyłącznie dla urządzeń mobilnych.

Poniżej dodałem przybliżony przykład. Proszę wybaczyć style wbudowane, ale chciałem podać podstawowy przykład, aby moje pytanie było trochę jaśniejsze.

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

Czy może muszę podawać elementowi div kontenera procentową wysokość na podstawie całej strony, czy też patrzę na to całkowicie źle?

Czy uważasz, że tła CSS to najlepszy sposób na zrobienie tego? Może istnieje technika, która obsługuje różne tagi img w zależności od szerokości urządzenia / ekranu. Ogólna idea jest taka, że ​​szablon strony docelowej będzie używany wiele razy z różnymi zdjęciami produktów, więc muszę się upewnić, że opracuję go w najlepszy możliwy sposób.

Przepraszam, jest to trochę rozwlekłe, ale przechodzę od tego projektu do następnego, więc chciałbym załatwić tę małą rzecz. Z góry dziękuję za poświęcony czas, to bardzo cenne. pozdrowienia

Darryl Young
źródło
Przeglądarka może zrezygnować z pobierania zasobu obrazu, jeśli ma display: none, więc zawsze możesz wyświetlać różne obrazy z zapytaniami o media bez JS
Ben Taliadoros

Odpowiedzi:

16

Zamiast używać background-image, możesz użyć imgbezpośrednio i aby obraz rozciągał się na całą szerokość okna, spróbuj użyć max-width:100%;i pamiętaj, nie stosuj żadnego dopełnienia ani marginesu do głównego elementu div kontenera, ponieważ zwiększy to całkowitą szerokość kontenera. Korzystając z tej reguły, możesz mieć szerokość obrazu równą szerokości przeglądarki, a wysokość również będzie się zmieniać zgodnie ze współczynnikiem proporcji. Dzięki.

Edycja: zmiana obrazu w innym rozmiarze okna

$(window).resize(function(){
  var windowWidth = $(window).width();
  var imgSrc = $('#image');
  if(windowWidth <= 400){			
    imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
  }
  else if(windowWidth > 400){
    imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
  <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>

W ten sposób zmieniasz swój obraz w różnym rozmiarze przeglądarki.

maksbd19
źródło
Dziękuję za poświęcenie czasu, aby to dla mnie zrobić, to bardzo cenne. Po prostu dałem to szybko i wygląda na to, że działa.
Darryl Young
2
Ta stara odpowiedź wyglądała atrakcyjnie ... ale czy nie jest prawdą, że przeglądarka mobilna nadal będzie pobierać (tylko nie wyświetlać) obraz początkowo ustawiony w kodzie HTML jako src? Jeśli tak, to nie jest to starter, ponieważ chodzi o oszczędzanie zasobów urządzenia mobilnego.
Tim Gallant
1
Myślę, że Tim Gallant ma rację w tym przypadku - w tym przypadku przeglądarka załaduje oba obrazy jako zasób, a następnie wyświetli tylko niższą rozdzielczość. Chociaż wydaje się to atrakcyjne, na urządzeniach mobilnych jest w rzeczywistości wolniejsze niż ładowanie tylko tego o wysokiej rozdzielczości, a przy tym poświęceniu zobaczysz tylko obraz o niższej rozdzielczości ... najgorszy z obu światów.
mały maleńki człowieczek
1
Słaba odpowiedź. Głosowano w dół. Po prostu rozdęty i stary kod.
TheBlackBenzKid
Wstaw zapytania multimedialne, które dodają wyświetlanie: brak do obrazów, których nie chcesz wyświetlać - większość przeglądarek ich nie pobierze
Ben Taliadoros
213

Timowi S. znacznie bliżej było do „poprawnej” odpowiedzi niż obecnie akceptowanej. Jeśli chcesz mieć obraz tła o 100% szerokości i zmiennej wysokości wykonany za pomocą CSS, zamiast używać cover(co pozwoli obrazowi rozciągać się z boków) lub contain(co nie pozwala na całkowite rozciągnięcie obrazu), po prostu ustaw CSS w ten sposób:

body {
    background-image: url(img.jpg);
    background-position: center top;
    background-size: 100% auto;
}

Spowoduje to ustawienie obrazu tła na 100% szerokości i przepełnienie wysokości. Teraz możesz użyć zapytań o media, aby zamienić ten obraz zamiast polegać na JavaScript.

EDYCJA: Właśnie zdałem sobie sprawę (3 miesiące później), że prawdopodobnie nie chcesz, aby obraz się przepełnił; wydaje się, że chcesz, aby element kontenera zmienił rozmiar na podstawie jego obrazu tła (aby zachować proporcje), co nie jest możliwe w przypadku CSS, o ile wiem.

Miejmy nadzieję, że wkrótce będziesz mógł użyć nowego atrybutu srcset na imgelemencie. Jeśli chcesz imgteraz użyć elementów, obecnie akceptowana odpowiedź jest prawdopodobnie najlepsza.

Możesz jednak utworzyć responsywny element obrazu tła o stałym współczynniku proporcji, używając wyłącznie CSS. Aby to zrobić, ustawiasz na height0 i ustawiasz padding-bottomprocent własnej szerokości elementu, na przykład:

.foo {
    height: 0;
    padding: 0; /* remove any pre-existing padding, just in case */
    padding-bottom: 75%; /* for a 4:3 aspect ratio */
    background-image: url(foo.png);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

Aby użyć różnych współczynników proporcji, podziel wysokość oryginalnego obrazu przez jego własną szerokość i pomnóż przez 100, aby uzyskać wartość procentową. To działa, ponieważ procent wypełnienia jest zawsze obliczany na podstawie szerokości, nawet jeśli jest to dopełnienie pionowe.

cr0ybot
źródło
4
doskonałe, szybkie wyszukiwanie w Google przyniosło mnie tutaj, problem rozwiązany!
J King
6
Takie odpowiedzi powinny być zaakceptowane, odpowiadają na pytanie. Jasne, podaj „najlepsze rozwiązanie”, ale odpowiedz też na pytanie, a gdy ludzie je znajdą, otrzymają odpowiedź, której chcą!
tim.baker
To nie działa dla mnie, używam Google Chrome 47.0. Czy to możliwe, ponieważ odpowiedź jest nieaktualna?
MeV
Czy mógłbyś sprecyzować, która część nie działa? Podałem kilka możliwych odpowiedzi, więc jeśli jedna część nie działa, mogę rozwinąć ją dalej, aby udzielić lepszej i bardziej aktualnej odpowiedzi.
cr0ybot
z jakiegoś niejasnego powodu ustawienie background-size: autorozwiązało mój problem na wszystkich orientacjach urządzeń.
n__o
17

Spróbuj tego

html { 
  background: url(image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

Wersja uproszczona

html {
  background: url(image.jpg) center center / cover no-repeat fixed;
}
Pon.
źródło
16

Możesz użyć właściwości CSS background-sizei ustawić ją na coverlub contain, w zależności od preferencji. Okładka całkowicie zakryje okno, podczas gdy zawarta sprawi, że jedna strona dopasuje się do okna, nie zasłaniając całej strony (chyba że proporcje ekranu są równe obrazowi).

Należy pamiętać, że jest to właściwość CSS3. W starszych przeglądarkach ta właściwość jest ignorowana. Alternatywnie możesz użyć javascript, aby zmienić ustawienia CSS w zależności od rozmiaru okna, ale nie jest to preferowane.

body {
    background-image: url(image.jpg); /* image */
    background-position: center;      /* center the image */
    background-size: cover;           /* cover the entire window */
}
Tim S.
źródło
4

Po prostu użyj dwukolorowego obrazu tła:

<div style="width:100%; background:url('images/bkgmid.png');
       background-size: cover;">
content
</div>
Alexey Kaverin
źródło
2

Jest rok 2017, a teraz możesz użyć dopasowania do obiektu, które ma przyzwoite wsparcie . Działa w ten sam sposób, co elementy div, background-sizeale na samym elemencie i na każdym elemencie, w tym na obrazach.

.your-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
Nacięcie
źródło
1
html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}
Mostafa Norzade
źródło