Legen Sie ein Bild auf 100% Breite oder Höhe, je nachdem, was zuerst eintritt

Question

Ich habe ein Bild innerhalb einer div und ich möchte entweder das Bild auf 100% Breite oder 100% Höhe der enthaltenen div verkleinern. Wie vorgeschlagen here, habe ich versucht, Max-Höhe und Max-Breite auf 100% einzustellen. Dies verursacht immer noch einen Überlauf (und ich möchte das Bild nicht mit Überlauf beschneiden: versteckt). Das Bild wird innerhalb des div verschoben.

Ist es möglich, dies zu erreichen? Mein Code ist unten. Mache ich etwas falsch?

div#_content div#_thumbnails div { 
    padding:2px; 
    display:inline-block; 
    min-width:10%; 
    max-width:25%; 
    min-height:80px; 
    max-height:125px; 
    text-align:center; 
} 
div#_content div#_thumbnails img { 
    display:inline; 
    padding:2px; 
    float:left; 
    max-height:100%; 
    max-width:100%; 
} 

In dem unten stehenden Javascript ist imgs eine Liste von URLs. Thumbnails ist eine Mutter-div, dass die Behälter in sitzen.

for (i in imgs) { 
    if (imgs[i]) { 
    var new_img = document.createElement('IMG'), 
     container = document.createElement('DIV') 
    new_img.setAttribute('alt', "image"+i.toString()) 
    new_img.setAttribute('src', imgs[i]) 
    container.appendChild(new_img) 
    thumbnails.appendChild(container) 
    } 
} 

Ich hoffe, dies ist nicht eine dumme Frage, aber ich habe gesucht und keiner der Vorschläge, die ich gearbeitet haben, gefunden habe.

Answer 1

Bitte versuchen Sie es verwenden:

<style type="text/css"> 
#thumbContainer { 
    position:relative; 
} 
.thumb{ 
    position:relative; 
    float:left; 
    width: 100%; 
    height: auto; 
} 
.thumb img { 
    background-size: cover !important; 
    width: 100%; 
    height: auto; 
} 
</style> 

<div id="thumbContainer"> 
    <div class="thumb"><img src="http://3.bp.blogspot.com/_ABFjy8u6h9s/TStw8-_4j1I/AAAAAAAACE0/cKm4ZiIFilk/s1600/NATUREZA+01.jpg" /></div> 
    <div class="thumb"><img src="http://3.bp.blogspot.com/_ABFjy8u6h9s/TStw8-_4j1I/AAAAAAAACE0/cKm4ZiIFilk/s1600/NATUREZA+01.jpg" /></div> 
    <div class="thumb"><img src="http://3.bp.blogspot.com/_ABFjy8u6h9s/TStw8-_4j1I/AAAAAAAACE0/cKm4ZiIFilk/s1600/NATUREZA+01.jpg" /></div> 
</div> 

(http://jsfiddle.net/ahjjg/)

Adittional, schlage ich Hintergrund ein von <img>.

Answer 2

Wenn Sie PHP dann ist dies die beste Lösung für Sie

http://www.welancers.com/perfect-solution-for-image-resizing-based-on-width-height/