afbeelding div laten vullen met behoud van verhoudingen

[baws]

Hallo,

Ik heb 2 rijen met 3 divs dus

[][][]
[][][]

deze zijn allemaal 290px; x 260px;

Uit mijn database haal ik automatisch de img src
deze img's varieren in grote zo zijn sommige 500x300 en andere weer 300x500
wat ik wil is dat hij altijd zorgt dat de afbeelding past in de div, maar dat er zo veel mogelijk te zien is.

ik heb het geprobeerd met

.img

max-width:100%;
max-height:100$;

maar dan blijft er altijd een ruimte over.
kan iemand mij helpen?

 

[Remc0]

Hallo,

Ik weet het niet zeker, maar misschien werkt het beter als je de .div class op width 33% zet. Dan past de image zichzelf aan de grootte van de div.

 

[baws]

maar wat als de hoogte van die div de hoogte dan niet behaalt

 

[bron]

<div id="container">
  <div><img src="images/img1.jpg" alt="" /></div>
  <div><img src="images/img2.jpg" alt="" /></div>
  <div><img src="images/img3.jpg" alt="" /></div>
</div>


/*simpele reset*/
* { margin: 0; padding: 0; border: 0; }

#container {
  width: 800px;
  margin: 20px auto;
}

#container div {
  float: left;
  width: 260px;
  height: 290px;
  border: 1px solid #ccc;
}

#container div img {
  float: left;
  /*width en max-height: 100% - margin*/
  width: 98%;
  max-height: 98%;
  height: auto;
  margin: 1%;
}