Automaticky upraviť obrázok vo vzťahu k výške okna pomocou CSS - html, css

môže to vyzerat ako hlúpa otázka, ale aj tak by som ocenila nejakú pomoc.

Mám obrovský obraz, ktorý potrebujem prispôsobiť na 1/3 výšky okien automatizovane pomocou CSS a potrebujem udržať jeho šírku proporcionálnu.

Môžete mi dať nejaké rady?

odpovede:

Ak vám správne rozumiem, pridajte vlastnosť CSS: height:33%

To je bohužiaľ tak blízko, ako sme dosiahli 1/3 výšky okna. Za predpokladu, že nadradený uzol vášho obrázka je telo, alebo má aj 100% výšku okna.

Možno budete musieť pridať:

html, body {
height:100%
}

Rovnako ako u akýchkoľvek prvkov, na ktorých je obrázok umiestnený.

Môžete to urobiť pomocou atribútu css position

#some-container {height:600px; position:relative;}


/* this will make your image height 200px */
#some-contained-image {position:absolute; height:33%}

Dala som si rukoväť tu

Akonáhle máte prvok označený polohourelatívna potom môžete použiť absolútnu pozíciu na prvok, ktorý obsahuje (bez ohľadu na hĺbku). Protiinštutivne sa určuje poloha položky označenej absolútne vzhľadom na kontajner označený ako relatívny.

To samozrejme ovplyvní oveľa viac ako len výšku, takže nemôžem odporučiť, aby ste to urobili. Pravdepodobne budete musieť použiť javascript, aby ste dostali to, čo chcete.