Slika ozadja CSS se prilega širini, višina mora biti sorazmerna

Imam

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

Želeni učinek je, da ima ta slika v ozadju širino, ki je enaka širini strani, višina pa se spreminja, da se ohrani razmerje. npr. če je prvotna slika 100*200 (poljubne enote) in je telo široko 600px, mora biti slika v ozadju visoka 1200px. Višina se samodejno spremeni, če se spremeni velikost okna. Ali je to mogoče?

Trenutno je videti, da Firefox prilagodi višino in nato prilagodi širino. Ali je to morda zato, ker je višina najdaljša dimenzija in se poskuša izogniti obrezovanju? Želim* obrezati navpično, nato pa se pomikati: brez vodoravnega ponavljanja.

Poleg tega Chrome postavi sliko na sredino, brez ponavljanja, tudi če je izrecno navedena možnost background-repeat:repeat, ki je tako ali tako privzeta.

Programiranje
html css
Npopoldan 33p13.2.20120tni 33trpopoldanni februar 2012 в 3:14
19 ogledi
Rešitev

Za to obstaja lastnost CSS3, in sicer background-size (preverjanje združljivosti). Čeprav lahko nastavimo vrednosti dolžine, se običajno uporablja s posebnima vrednostma contain in cover. V vašem primeru morate uporabiti cover:

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /*  contain
> Pomanjšajte sliko, pri čemer ohranite njeno notranje razmerje stranic (če obstaja), na največjo velikost, tako da se lahko njena širina in višina prilegata območju za pozicioniranje ozadja.

To zagotavlja, da je slika ozadja vedno v celoti vsebovana v območju za pozicioniranje ozadja, vendar je v tem primeru lahko nekaj praznega prostora zapolnjenega z vašo `barvo ozadja`:

![contain][4]

### `cover`

> cover
> Pomanjšajte sliko, pri čemer ohranite njeno notranje razmerje stranic (če obstaja), na najmanjšo velikost, tako da lahko tako po širini kot po višini v celoti pokrije območje pozicioniranja ozadja.

S tem je zagotovljeno, da slika ozadja pokriva vse. Barva ozadja ne bo vidna, vendar je lahko glede na razmerje zaslona velik del slike odrezan:

![cover][5]

### Demonstracija z dejansko kodo

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

Note the grey background. The image does not cover the whole region, but it's fully contained.

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 covers all of the

.

```
Zeta
Edited answer Ndopoldan 18p6.11.20154tni 18trdopoldanni november 2015 в 8:33
Komentarji (7)

Na podlagi nasvetov s spletne strani https://developer.mozilla.org/en-US/docs/CSS/background-size sem pripravila naslednji recept, ki se mi je obnesel.

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;
}
Komentarji (2)

Nisem prepričan, kaj točno iščete, vendar bi si morali ogledati te odlične objave na blogu, ki jih je napisal Chris Coyier iz CSS-Tricks:

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

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

Preberite opise vseh člankov in preverite, ali so to, kar iščete.

Prvi članek odgovarja na naslednje vprašanje:

Ali obstaja način, da sliki ozadja spremenimo velikost? Tako, da bi ozadje spletne strani od roba do roba zapolnili s sliko, ne glede na velikost okna brskalnika. Prav tako lahko sliko povečate ali zmanjšate, ko se okno brskalnika spreminja. Prav tako poskrbite, da slika ohrani svoje razmerje (da se čudno ne raztegne). Prav tako ne povzroča vrstic za pomikanje, ampak se po potrebi samo navpično odreže. Prav tako je na strani prikazan kot vdelana oznaka .

Cilj drugega prispevka je dobiti naslednje: "slika ozadja na spletni strani, ki ves čas pokriva celotno okno brskalnika. "

Upam, da to pomaga.

Komentarji (0)