Jak ustawić minimalną szerokość z rozmiarem tła

Question

Mam obraz o rozmiarach 1000px X 600px. Chcę używać go jako responsywnego tła dla elementu div, ale chciałbym ustawić minimalną szerokość 1000px pomimo tego, jak małe jest okno przeglądarki.

Jest to frustrujące, ponieważ nie istnieje prosty sposób zdefiniowania min. szerokość.

Jeśli używam wielkości tła: okładka - z jakiegoś powodu obraz jest domyślnie większy niż 1000px.

pomóż

Answer 1

przypadku zapytań o media są możliwe, można skonfigurować zapytania mediów dla przeglądarki rzutni mniejsza niż 1000px szerokości.

Zakładając, że HTML rzutnia jest ustawiona:

<meta name="viewport" content="width=device-width"> 

A twój div o nazwie 'bg':

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

W swojej CSS:

.bg { 
    width: auto; /* Scale the div to the parent width */ 
    height: 900px; /* The div needs some height to be visible */ 
    background-image: url(bg.png); /* This is your background image */ 
    background-size: 100%; /* Always size the image to the width of the div */ 
    background-position: top; /* Position the image to the top center of the div */ 
} 

/* For any viewports less than 1000px wide */ 
@media (max-width: 1000px) { 

    .bg { 
     background-size: 1000px 600px; /* Force the image to its minimum width */ 
    } 

} 

Answer 2

miałem ten sam problem . Poniższy kod pracował dla mnie. Po prostu musiałem dodać minimalną szerokość w tym samym elemencie. Tu po prostu używany element HTML, to sądzę, że byłoby bardziej konwencjonalny używać elementu body

 /* CSS Style Sheet */ 

html { background-image:url(example.JPG); 
        background-size:cover; 
        min-width:1000px;} 

mam nadzieję, że to pomaga,

Answer 3

Jest teraz opcja dla background-size do tylko skalować obraz, dopóki obraz nie osiągnie rzeczywistej wysokości/szerokości. W ten sposób nie musisz ustawiać minimalnej szerokości ani niczego.

W swojej CSS:

body { 
    background-size: cover; 
} 

referencyjny: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values