HTML+CSS-ben kép dobozba méretezése [megoldva]

Internet: PHP, CGI, stb.

Nem először fog ki rajtam a címben feltett kérdés. A célom az, hogy HTML+CSS-sel egy képet úgy helyezzek el egy fix méretű dobozban (div-ben), hogy:

 * A lehető legnagyobb részt használjuk ki a dobozból. Tehát vagy oldalt, vagy felül érjen a kép a doboz széléig.

 * A képarány ne romoljon el.

 * Minden képet jól kezeljen kicsit, nagyot, keskenyet magasat, széleset, alacsonyat is.

Tulajdonképpen ennyi, ilyen egyszerű. Nem is egyszer túrtam már a netet ennek a feladatnak a megoldását keresve. Amin el szoktak vérezni a neten talált megoldások, az az, hogy különböző CSS kell, ha a kép állított és ha fektetett. Illetve különböző kell, ha a képet nagyítani kell, mintha kicsinyíteni.

A kérdés az, hogy létezik-e css kifejezés ami mindent tud?

JavaScripttel azt hiszem egyszer régen már megoldottam a kérdést, de ha csak JS megoldás ismert, akkor abból is érdekel a legegyszerűbb.

 

Szerk.: Köszönöm, a javasolt megoldás tökéletesen működik!

  • 393 megtekintés

( Mcsiv v | 2024. 09. 30., h – 00:44 )

Szerkesztve: 2024. 09. 30., h – 01:05

Két út van (modern browsereket nézve csak): ha nem feltétel az img tag, hanem jó a div háttereként, akkor: background-image: url(aképed.jpg); background-size: contain; lesz a barátod. Esetleg még egy background-position: center; jól jöhet hozzá

Ha mindenképpen img tagként szeretnéd, akkor a következő lesz a megoldás

<div style="width: 600px; height: 600px;">
  <img src="aképed.jpg" style="width: 100%; height: 100%; object-fit: cover;" />
</div>

// Happy debugging, suckers
#define true (rand() > 10)