CSS og bilder

[swanky]

Hei, jeg lurte på om noen av dere hadde en fiffig løsning på dette problemet.

 

Jeg driver og setter opp en side vha. CSS, og designet er delt i to kolonner og tre css-"bokser":

 

- leftbox: her skal "innholdet" plasseres

- rightbox-top: her er det litt informasjon om opphavsrett og kontaktadresser

- rightbox-bottom: her tenkte jeg å plassere et lite bilde

 

For at dette skal flyte best mulig, så har jeg angitt height/width i %, og dette fungerer greit når jeg endrer oppløsning på nettleseren. Og innholdet i leftbox og rightbox-top flyter fint innenfor rammene. Men så er det bildet da... Dette har jo en fast størrelse (150x100px), og det ser rart ut når jeg resizer nettleseren: rammen endrer størrelse, men bildet flyter ut over rammene i rightbox-bottom.

 

Spørsmålet blir derfor: finnes det noen måte jeg kan "tvinge" bildet til å endre størrelse "on the fly"? Det jeg er ute etter er selvsagt en løsning der bildet - uavhengig av oppløsning på skjermen - holder seg innefor de gitte rammene.

[haugsand]

Det er ikke mulig å strekke bildet "on the fly" ved hjelp av CSS, men vet ikke om javascript har det som trengs.

 

Kan du gi oss eksempler -- og helst laste opp siden -- så vi kan tenke ut alternative løsninger?

[FuLu]

Som satyrium sier, så er det ikke mulig med css. Du kan angi % størrelse på bilde om du bruker img tag'en, men dette gir nok ikke resultat du er ute etter.

 

Men om bildet kommer utenfor rightbox-bottom, så kunne du prøvd å bruke overflow: hidden; Da vil det av bildet som flyter utenfor bli skjult.

[mikk-]

Eventuelt ha en minimumsbredde på høyrekolonnen?

[N*]

du kan putte en <img> inni diven og angi den med %

da vil den strekke seg men det ser jo ikke serlig pent ut.

 

se hvordan denne siden har løst problemet