A képméret változtatása képest a blokk, a tervezés és fejlesztés a helyszín

Jó napot kívánok. 🙂

Ebben a leírás megmutatja, hogyan kell csinálni, hogy az adaptív elrendezés, ha a szélessége a blokk megváltozik, a kép, ami benne van, mérete megváltozik képest a blokk. Volt egy leckét - Hogyan nyúlik a háttér teljes szélességében a blokk. ehhez hasonló, de vannak változatos háttérrel blokk. Azonnal Eljárás kép beillesztése az IMG tag.

Egy példa az adaptív képnagyítást képest a szülői egység, akkor láthatjuk a példát. Hogy a kép változása, egyszerűen változtatni az ablak méretét a böngésző.

Ezt a hatást elérni egy egyszerű CSS. Ha egyszerűen csatlakoztassa a kép, akkor túlmutatnak a blokk, és ez nem pontosan mire van szüksége, különösen akkor, ha az egység megváltoztatja a méretét, vagyis az oldal használ adaptív elrendezést.

Blokk, amelyen belül van behelyezve a képet, lehet, hogy egy fix szélessége pixelben vagy változás tekintetében a méret a böngésző ablakot. A kép lehet különböző méretű, de ahhoz, hogy rendben, akkor hozzá kell tenni stílusokat. Ezt megelőzően, akkor lehet rendelni, hogy egy osztály, vagy stílusokat egyszer az összes kép egyszerre.

Például, az egység szélessége 75% -ot a képernyőn, a kép akkor lesz teljes szélességét és megváltoztathatja a méretét az egység.

Mi blokkolja stílusok:

Kép hozzárendelése a maximális szélessége százalékban, automatikus meghatározását a magasságot. Magasság szükségszerűen más, csökkenő szélessége a blokk, a kép megváltozik a szélessége, de nem a magasság és a szabálytalan alakú. Ready stílusok lesznek nagyjából.

Mint látható, minden nagyon egyszerű. Ha megadja a paramétereket, az eredmény is szükség lesz. Egy időben, én szenvedek elérni ezt a hatást.

Ez minden, köszönöm a figyelmet. 🙂

Ha hasznos volt a munkámhoz, támogatni tudja a helyszínen :)

Szia kedves barátom

Van AdBlock telepített bővítmény vagy hasonlók. Add oldalamon a fehér listát, és így vnesesh hozzájárulnak kialakulásához. Arról, hogy hogyan tiltsa AdBlock szeretné ezt az ablakot