A kép beállítása méret a képernyő felbontása

Minden oldalak az elrendezés oldal elrendezés lehet osztani három alapvető csoportra mereven rögzített (Merev rögzített). adaptív gumi (Alkalmazható folyadék) és bővíthető elasztikus (bővíthető elasztikus) elrendezés.

Ebben a témában, úgy a lehetőséget kiigazítására a terveket sapkák - nevezetesen, képek, elrendezések helyszínek mellett a gumi.

Ez úgy történik, általában három fő módja van:
* Előírása sapkák, nem rögzített területek a háttérben.
* A képméret változtatása elhelyezni - különböző módon.
* Változás az összes fajta elemek dinamikusan hozzáadása / megváltoztatása stílusokat.

Kivetése sapkák, nem rögzített területek a háttérben.

A leggyakoribb és cross-browser, egy olyan típusú konstrukció:

és a háttér - a közepén.

.
Egy táblázat, ebben az esetben, az előírt mintát, és a szélesség százalékában - általában 100%.
A szélessége a táblázat sejtekben, amelyekben kerül a grafikai elemek, általában előírt pixel, de legalább az egyik a sejtek a táblázatban kell szabad szélessége (auto).
Azaz, ha két sejt, mint ebben az esetben, egy előre meghatározott fix összeg, amely egyenlő a kép szélességét, a második a «auto» - azaz, a többi a szélesség.

Sami képeket szúrhat be a kijelölt cella, mint egy képet (tag

). és a háttér.
Ebben az esetben a háttérképet ki, mivel a bal cella már tartalmaz szöveget blokk - szerzői jog, és a jobb oldali feltételezi jelenlétét.

Ez egyszerű - egy példát:

De nem minden kupak lehet vágni ezen a módon, és itt kezdenek némi nehézséget.
Mérlegeli, hogy foglalkozzon velük tovább.

Paramétereinek megváltoztatása pozícionált képek

Méretezés képest a szülő elem.

Ebben az esetben - az asztalra.

Csak szeretném megjegyezni, hogy az Internet Explorer, egy kis probléma a változás nagysága a tárgy - ebben az esetben - a képen.
Ennek lényege a következő:
Ha kép tényleges szélessége például 1024 képpont, és szükséges, hogy ha megváltoztatja a szélessége a böngészőablak a kép nyújtva / szűkült arányban, majd a szűkület a böngésző ablak szélességét a kép egy bizonyos ponton „beragadt”, és nem tovább szűkül. Ennek eredménye, hogy túl van a tervezett tartalmat.
Úgy értem, hogy a kép nem szűkül kisebbek, mint a tényleges méret.

Kezeli ez a „bug” meglehetősen egyszerű, és mindössze egy sort a CSS-kód - az ingatlan «table-layout: fix», alkalmazni kell az asztalra, ami belépett a képbe.

Ezért, ha kép sapka nyilvánvalóan nagyobb minimális szélessége az oldalon, akkor be kell állítani ezt a paramétert asztalra.
Úgy van beállítva a stílusok (CSS) és összesen két érv: «auto» és «fix».

Ezen kívül:
Ha a kép nem meghatározott magasságot, vagy állítsa a «auto» - a kép arányainak arányosan (tartva képarány).
Ha a magassága említett specifikus (pozitív minden egység). A képarány megbomlik, és a kép arányainak kaput, miközben egy előre meghatározott magasságot.

? 200 '200px': '' + (this.scrollHeight + 5) + 'px'); „>

CSS-stílusok (a kép arányainak arányosan)

.
ahol:
document.body.className - set tag Osztály bukovki «m» és változó «res». Most, hogy ezt: «class = "m1024"»
window.onresize = setScreenClass; - ismétlés funkció átméretezéskor az ablakot.
.

Példa ☑.
.
Megjegyzés:
A programkód, ami vonatkozik JavaScrpt. speciális karaktereket meg kell.
Szimbólum „különleges”. ha hordoz egy további jelentést.
Védő - helyett a szöveg a különleges karaktereket a megfelelő szöveget cserélni.
Bent a sorok között azt végzik a „# 92 szimbólumok; „- backslash, amely azt mondja, a tolmács, hogy a következő karaktert kellene tekinteni, mint egy normális karakter, és nem mint egy operátor / speciális karaktert.
Ebben az esetben a szimbólum „# 92; "Pajzs magát, azaz a kimeneti kombinációja backslash" # 92; # 92; ”.

Szeretném megérinteni egy témát mégis, mint egy háttérképet az oldal, és dinamikusan módosíthatók a beállítások, attól függően, hogy a felhasználó a képernyő felbontását.
nevezetesen:
* A kép teljesen kitöltsék a háttérben az oldalon, függetlenül a képernyő felbontását;
* Kellene. lehetséges fenntartani képarány (képarány); (Később világos lesz, hogy miért van írva „lehetséges”)
* A kép nem okozhat görgetés (scroll bar);
.

Megváltoztatása az oldal háttér révén CSS3 tulajdonságait «háttér méretű»

Amint azt már említettük, az Advent a CSS3. nevezetesen a tulajdonságait «háttér méretű». hogy elég egyszerű.
Hadd emlékeztessem önöket ingatlan «háttér méretű» által támogatott főbb modern böngészők - Internet Explorer 9 a Firefox 4+. Opera 9.5 +. Safari 5+. Chrome 4+. Konqueror 3.5.4 +.

HTML-kód:
- Nem szükséges, hiszen munka csak tag .
- ha ez - nézd meg a forráskódot.
.

ahol:
html, body - kérés «html» és «test» háttérszín - átlátszó - így a kép ragyogott.
html - kérés háttérképet Html, rögzítse a központban, megtiltják ismételni.
html - ossz CSS3 ingatlan háttér-size értéke «fedél» - a képméret, miközben az arányok maximális méretet (szélesség vagy magasság -, hogy több) egység - ebben html.

Most, hogy működik az IE. ideértve a hatodik változat.
.

Változó oldal háttérszíne által elhelyezett képek.

Több viszonylag egyszerű módon rögzíteni, és nyújtsd a háttérben, attól függően, hogy a méret a monitor a következő: - a tartalom zárt kép van rögzítve a bal felső sarokban, és ez meghatározza a minimális szélessége és magassága 100% - ezáltal megőrizve a arányosság átméretezés.

Azt is hozzáteszi, min-width kép szélességét úgy, hogy a kép soha nem lesz kisebb a tényleges méret.

Tehát, hogy nem volt az előtérben, maga a kép, és a blokk wrapper eltolt z-tengely a háttér (z-index: -1).

Is, @media képernyő és (max-width: 1024 képpont). amely beállítja a kép helyzetét, amikor az ablak kisebb, mint a kép, kombinációjának alkalmazásával értékének százalékában a bal helyzet és a negatív bal oldali mezőben.

? 200 '200px': '' + (this.scrollHeight + 5) + 'px'); „>

- Után hozzáadott tartalom a zárás előtt .

Példa ☑.
.
☑ És egy másik példa a cross-browser (húzza a bal felső sarokban, kissé eltolva).
.

Megjegyzés.
Meg kell érteni. hogy a nagy méretezés a kép, annál több rögzített álló háttér, csökken a teljesítmény a böngésző.
Ezen felül. hogy ne veszítse minőség nagy képernyőfelbontás, a kép jobb használni maximális mérete, és az ilyen képek is nyomhat nagyon.

Szerettem volna tudni, hogy lehet-e tenni optimalizálási háttérben különböző monitorokra, amelyek, például, ha a háttérképet 1600 x 1200 pixel, nem néz ki kopott a 1024-768, annak a ténynek köszönhető, hogy van, és a fele nem illik, és állítsa be a kívánt képernyő mérete, például előfordul a mi asztali, amikor úgy dönt oboinu, ő állítja be a kívánt méretet a képernyőn, de nem nyírni, elutasítva minden, ami nem tartalmazza. Hálás lennék a segítséget, ha valaki tudja.

Hogyan kell csinálni? Mi itt olvasható (egy példa arra, hogyan működik)