Obraz tła CSS dopasowuje szerokość, wysokość powinna automatycznie skalować się proporcjonalnie

mam

body {
    background: url(images/background.svg);
}

Pożądanym efektem jest to, aby ten obraz tła miał szerokość równą szerokości strony, a wysokość zmienia się, aby zachować proporcję. np. jeśli oryginalny obraz ma rozmiar 100 * 200 (dowolne jednostki), a treść ma szerokość 600 pikseli, obraz tła powinien mieć wysokość 1200 pikseli. Wysokość powinna zmieniać się automatycznie, jeśli rozmiar okna zostanie zmieniony. czy to możliwe?

W tej chwili Firefox wygląda tak, jakby dopasowywał wysokość, a następnie dostosowywał szerokość. Czy może dlatego, że wysokość jest najdłuższym wymiarem i stara się uniknąć przycinania? I chcą , aby przyciąć w pionie, a następnie przewiń: No Repeat poziomą.

Ponadto Chrome umieszcza obraz na środku, bez powtarzania, nawet jeśli background-repeat:repeatpodano go wyraźnie, co i tak jest ustawieniem domyślnym.

Jest do tego właściwość CSS3, a mianowicie background-size( kontrola zgodności ). Chociaż można ustawić wartości długości, zwykle używa się go ze specjalnymi wartościami containi cover. W twoim konkretnym przypadku powinieneś użyć cover:

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

Eggsplanation dla containicover

Przepraszam za kiepską kalamburę, ale wykorzystam zdjęcie dnia autorstwa Biswarup Ganguly do demonstracji. Powiedzmy, że to jest twój ekran, a szary obszar znajduje się poza twoim widocznym ekranem. Dla celów demonstracyjnych zamierzam przyjąć proporcje 16 x 9.

Chcemy wykorzystać wspomniane zdjęcie dnia jako tło. Jednak z jakiegoś powodu przycięliśmy obraz do 4x3. Możemy ustawić background-sizewłaściwość na pewną stałą długość, ale skupimy się na containi cover. Zauważ, że zakładam również, że nie zmieniliśmy szerokości i / lub wysokości body.

contain

contain

Skaluj obraz, zachowując jego wewnętrzny współczynnik kształtu (jeśli istnieje), do największego rozmiaru, tak aby zarówno jego szerokość, jak i wysokość mieściły się w obszarze pozycjonowania tła.

Dzięki temu obraz tła jest zawsze całkowicie zawarty w obszarze pozycjonowania tła, jednak background-colorw tym przypadku może być wypełniona pusta przestrzeń :

cover

cover

Skaluj obraz, zachowując jego wewnętrzny współczynnik kształtu (jeśli istnieje), do najmniejszego rozmiaru, tak aby zarówno jego szerokość, jak i wysokość mogły całkowicie pokryć obszar pozycjonowania tła.

Dzięki temu obraz tła pokrywa wszystko. Nie będzie widoczny background-color, jednak w zależności od proporcji ekranu duża część obrazu może zostać odcięta:

Demonstracja z rzeczywistym kodem

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

Na podstawie wskazówek z https://developer.mozilla.org/en-US/docs/CSS/background-size kończę z następującym przepisem, który działał dla mnie

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}

Nie jestem pewien, czego dokładnie szukasz, ale naprawdę powinieneś sprawdzić te doskonałe posty na blogu napisane przez Chrisa Coyiera z CSS-Tricks:

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

Przeczytaj opisy każdego z artykułów i sprawdź, czy szukasz tego.

Pierwsze odpowiedzi na następujące pytanie:

Czy istnieje sposób na zmianę rozmiaru obrazu tła? W trakcie wypełnienia tła strony internetowej krawędzią do krawędzi obrazem, bez względu na rozmiar okna przeglądarki. Zmień także rozmiar mniejszy lub większy wraz ze zmianą okna przeglądarki. Upewnij się również, że zachowuje swój stosunek (nie rozciąga się dziwnie). Ponadto nie powoduje pasków przewijania, po prostu odcina w pionie, jeśli to konieczne. Ponadto pojawia się na stronie jako tag wbudowany.

Celem drugiego postu jest uzyskanie następującego „obrazu tła w witrynie, który cały czas pokrywa całe okno przeglądarki”.

Mam nadzieję że to pomoże.

Obraz w tle nie jest ustawiony jako Perfect, wtedy jego css ma problem z utworzeniem, więc jego plik css zmienia się na poniższy kod

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

%; rozmiar tła: 100% 100%; "

Spróbuj tego,

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}

Po prostu dodaj tę jedną linię:

    .your-class {
        height: 100vh;
    }

vh to wysokość rzutni. Spowoduje to automatyczne skalowanie w celu dopasowania do okna przeglądarki urządzenia.

Sprawdź więcej tutaj: Zrób div 100% wysokości okna przeglądarki

body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}

Miałem ten sam problem, nie mogłem zmienić rozmiaru obrazu podczas dostosowywania wymiarów przeglądarki.

Zły kod:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

Dobry kod:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

Kluczem jest tutaj dodanie tego elementu -> rozmiar tła: zawierają;

Oto, co zadziałało dla mnie:

background-size: auto 100%;

Ustawienie rozmiaru tła nie pomaga, działało dla mnie następujące rozwiązanie:

.class {
    background-image: url(blablabla.jpg);
    /* Add this */
    height: auto;
}

Zasadniczo kadruje obraz i dopasowuje go, background-size: contain/coverwciąż go nie dopasowuje.