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

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

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.

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.

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;
}

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 */
}

Po prostu użyj dwukolorowego obrazu tła:

<div style="width:100%; background:url('images/bkgmid.png');
       background-size: cover;">
content
</div>

Dodaj css:

   html,body{
        height:100%;
        }
    .bg-img {
        background: url(image.jpg) no-repeat center top; 
        background-size: cover; 
        height:100%;     
    }

A html to:

<div class="bg-mg"></div>

CSS: rozciąganie obrazu tła do 100% szerokości i wysokości ekranu?

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;
}

html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}