Kép méretezés adott maximális mérethez
Ave!
Új vagyok még itt, de remélem jó helyre találtam, ahol némi segítséget remélhetek főleg CSS-sel kapcsolatos kérdésekben. Sajnos fogalmam sem volt, hogy lehetne erre a problémára rákeresni, így csak egyszerűen megkérdezem, hátha valaki tud legalább támpontot adni:
Adott egy kép, ami mondjuk egy div-ben foglal helyet. A cél az, hogy amennyiben a kép keskenyebb, mint az adott div, akkor az az eredeti méretében kerüljön ki az oldalra, azonban ha szélesebb, arányosan legyen leméretezve a div szélességéhez.
Megoldható ez CSS-ből? Esetleg kell hozzá JavaScript is? Hogyan?
■ Új vagyok még itt, de remélem jó helyre találtam, ahol némi segítséget remélhetek főleg CSS-sel kapcsolatos kérdésekben. Sajnos fogalmam sem volt, hogy lehetne erre a problémára rákeresni, így csak egyszerűen megkérdezem, hátha valaki tud legalább támpontot adni:
Adott egy kép, ami mondjuk egy div-ben foglal helyet. A cél az, hogy amennyiben a kép keskenyebb, mint az adott div, akkor az az eredeti méretében kerüljön ki az oldalra, azonban ha szélesebb, arányosan legyen leméretezve a div szélességéhez.
Megoldható ez CSS-ből? Esetleg kell hozzá JavaScript is? Hogyan?
Nope
Miért ne?
IE-ben nem
Akkor bonyolítsuk...
div, amiben a kép van, sajnos nem fix méretű, hanem az is ugyanúgy kell, hogy viselkedjen, mint a benne lévő kép; vagyis amíg kevés benne a szöveg, ill. keskeny a kép, keskeny maga is, de egy bizonyos maximum méretig növekedhet. Ez persze –div-ről lévén szó – működik is, viszont így nem tudok konkrét számot írni amax-width-hez.Ja és még valami: Mivel tulajdonképpen témát készítek egy IM klienshez, egyáltalán nem szempont, hogy IE-ben jól jelenjen meg; bőven elég, ha a KHTML motor ledarálja. :)
Nehéz ügy
De hogy?
Mégse js
Nem nyerő
divdefault, vagyis a lehető legkisebb méretét veszi fel, ami alig pár pixel. A másik gondom ezzel, hogy a kép méretét nem tudom explicite.kép méretezése
{
var szelesseg = window.screen.width;
var magassag = window.screen.height;
var kepszelesseg = szelesseg-52;
var arany = x;
var kepmagassag = kepszelesseg/arany;
document.write("<img src='images/head.jpg' width='" +kepszelesseg+ "' height='" +kepmagassag+ "' alt='img'/>");
}
egy szelesseg nevű változóban letárolom a képernyő szélességét, egy magassag nevű változóban letárolom a képernyő magasságát, ezzel megvan a felbontás.
Majd a képszélességet adom meg, tudom mennyi margót és paddinget adtam a divnek azt az értéket kivonom a szélességből és máris megvan a képszélesség. kiszámoltam az arányt, ezt x-el jelölöm, ez neked egy számérték lesz pl(8.5) és kiszámolom a magasságot. utánna pedig csak egy kiíratás gyün. ahol be akarod szúrni a képet ott csak meghívod a függvényt és kész is.
<script language="javascript" type="text/javascript">
imgResize();
</script>
</div>
Képernyő szélesség?
kiindulási pont