Kep kilog a div-bol (mert hosszab :)

Internet: PHP, CGI, stb.

Sziasztok!

A megjelenitendo kepek magassaga css height-el beallitva, de nehany kep eseteben a kep szelesebb lessz mint a div, ami termeszetesen nem jo. Ez esetben a div szelesegehez kellene igazitani a kepet, es a magassagbol elvenni, hogy aranyos maradjon (minden 100 kepbol, ha 1 lessz ilyen)

Kerdesem a kovetkezo meg lehet oldani html/css alapon (no javascript) az a problemat, vagy marad a php?

  • 1913 megtekintés

( samu.ferenc | 2010. 10. 12., k – 20:42 )

- img width, height?
- feltöltéskor ellenőrzés és átméretezés?

Nem ez, de ez alapjan eljutottam a megoldashoz. ie6-al ugyan nem megy, ie7-8 -cal nem tudtam tesztelni, de o/a , mozilla, chrome allat jo. Persze egyszeru mint a faek. Elotte is probaltam, de az a franya kotojel kimaradt, es persze nem volt jo :)

img.details_img {
max-height: 400px;
max-width: 700px;
}

---
Egy anlgaii etegyem ktuasátai szenirt nem szimát melyin serenrodbn vnanak a bteűk egy szbóan, az etegyeln ftonos dloog, hogy az eslő és az ultosó bteűk a hölyeükn lneegyek. A tböbi bteű lheet tljees össze-vabisszásagn, mgiés porbléma nlkéül oalvsahtó

( uid_17626 | 2010. 10. 12., k – 20:53 )

PHP
Megoldás kép feltölt megnéz x és y koordináták mennyi pixel, majd amelyik nagyobb mint ami kifér az alapján átkonvertál arányosítva.

$kep_tomb = getimagesize($feltoltott_kep);
$kep_tomb[0]; // szelesseg pl. 350
$kep_tomb[1]; // magassag pl. 200

( uid_194 | 2010. 10. 12., k – 21:19 )

Lehet egy picit trukkozni: background!

Nem img-kent teszed be a kepet, hanem beallitod, mint a div hattere. Innentol CSS3 background-size: "contain".

Elonye, hogy nem kell hozza se php, se javascript se semmi egyeb, pure-css (+html). Hatranya, hogy CSS3, igy elkepzelheto hogy egyes bongeszokben (hello IE) nem mukodik megfeleloen, es ott a kep egy resze nem fog latszani. Szerintem ez elfogadhato. (meg erre az esetre lehet JS :P)

( NPeete | 2010. 10. 12., k – 22:17 )

hát, ha tudod a méreteket, akkor mondjuk a div.osztály img selectornál beállítod a max-width-et? (esetleg oda 100%, olyat még nem próbáltam...)