jquery multiple img filling feste Höhe Container mit gleicher Breite

Question

Ich war sicher, dass dieses Problem einfach zu lösen war, aber nach stundenlanger Suche, poste ich hier endlich, um Hilfe zu finden.

Ich habe eine feste Höhe und Breite Container, lassen Sie uns als eine große Spalte betrachten.

Es werden 3 Bilder mit verschiedenen Größen angezeigt. Größe kann sich ändern.

Ich möchte die Bilder Größe ändern, um die Spalte vertikal zu füllen (keine Notwendigkeit, horizontal zu füllen), und erhalten Sie die gleiche Breite. (für eine "Spalte" aussehen)

Ich fand eine jquery-Plugin-Lösung für diese horizontal: jpicta. Es dauert die 3 Bilder und zeigen sie so groß wie möglich, mit der gleichen Höhe, um genau die Zeile zu füllen.

Aber jetzt suche ich das gleiche, aber für vertikale statt horizontal.

Stellen wir uns einen Container mit 1000px Höhe und 800px max-Breite vor. Und 3 Bilder auf, um sie anzuzeigen: img1: 800px * 1600px img2: 300px * 800px, img3: 1800px * 1600px

Meine logische sagen würde mir diese Schritte zu folgen (in jquery):

1. berechnen Sie die Gesamthöhe der 3 Bilder, wenn sie 100% Breite ihres Behälters sind.

2. Berechnen Sie, wie viel reiner wir die Gesamthöhe reduzieren müssen, damit sie auf die Behälterhöhe passt.

3. Reduzieren Sie jede Bildgröße entsprechend dieser Prozentzahl.

Aber ich bin voller Zweifel ...

Und vielleicht eine jQuery-Plugin vorhanden ist, dies zu tun in einer sauberen und stabilen Art und Weise. Aber nur ich konnte es nicht finden? Oder am schlimmsten! Ich finde es und versuche es, aber war nicht in der Lage, es auf die gute Art und Weise zu verwenden .. ^^

Irgendeine Idee?

Dank

[Bearbeiten] Hier einige exemples zu zeigen, was Ich mag würde zu tun. Die Bilder nehmen 100% Höhe ihres Behälters, sie alle haben die gleiche Breite, ohne das Verhältnis zu verlieren.

Answer 1

Ich schrieb schließlich ein kleines Skript, nicht so hart, schließlich :)

ich die Funktion erraten optimiert werden kann, ich bin kein Spezialist für jquery ... Jedenfalls macht es den Job für mich: Nehmen Sie alle Bilder, geben Sie ihnen die gleiche Breite und passen Sie sie an die Gesamthöhe der Säule an. Eine Genauigkeit: In meinem Fall habe ich es verwendet, um schöne Fotos in einem PDF anzuzeigen, so dass ich feste Breiten- und Höhenwerte entsprechend meinem A4-PDF-Inhalt erhielt. Es funktioniert unabhängig von der Anzahl der Bilder, die Sie anzeigen möchten.

JS:

function setImagesToFillAColumn() { 
    var maxWidth = 735; 
    var totalHeight = 0; 
    var availableHeight = 980; 

    //set all images to this max width and calculate total height 
    $('.pdf-a-column-images-container > img').each(function(){ 
     var width = $(this).width(); // Current image width 
     var height = $(this).height(); // Current image height 
     var ratio = height/width; 
     var newHeight = maxWidth * ratio; 
     $(this).removeAttr("width").removeAttr("height"); // Remove HTML attributes 
     $(this).css("height", newHeight+'px').css("width", maxWidth+'px'); // change css attributes 
     totalHeight = totalHeight + newHeight; 
    }); 

    //calculate the reduction purcentage neddded for all the images fit to the row 
    var purcentageReduction = availableHeight/totalHeight; 

    if (purcentageReduction < 1) { 
     //reduce to this purcentage for all image size 
     $('.pdf-a-column-images-container > img').each(function(){ 
      var finalHeight = $(this).height() * purcentageReduction; 
      var finalWidth = $(this).width() * purcentageReduction; 
      $(this).css("height", finalHeight+'px').css("width", finalWidth+'px'); // change css attributes 
     }); 
    } 
} 

Und html, ganz einfach:

<div class="pdf-a-column-images-container"> 
    <img src="urltoimg1" /> 
    <img src="urltoimg2" /> 
    <img src="urltoimg3" /> 
    <img src="urltoimg4" /> 
</div> 

Für eine andere Verwendung, machte ich die gleiche Funktion, aber die Bilder auf eine Reihe (horizontal) zu passen, anstatt eine Spalte . Es zeigt die Bilder, die ich gebe in einer einzigen Zeile, mit der gleichen Höhe und 100% der Zeile.

JS:

function setImagesToFillARow() { 
    var maxHeight = null; 
    var totalWidth = 0; 
    var availableWidth = 735; 
    //get the less high image height 
    $('.pdf-a-row-images-container > img').each(function(){ 
     if (maxHeight === null || $(this).height() < maxHeight) { 
      maxHeight = $(this).height(); 
     } 
    }); 

    //set all images to this height and calculate total width 
    $('.pdf-a-row-images-container > img').each(function(){ 
     var width = $(this).width(); // Current image width 
     var height = $(this).height(); // Current image height 
     var ratio = height/width; 
     var newWidth = maxHeight/ratio; 
     $(this).removeAttr("width").removeAttr("height"); // Remove HTML attributes 
     $(this).css("width", newWidth+'px').css("height", maxHeight+'px'); // change css attributes 
     totalWidth = totalWidth + newWidth; 
    }); 

    //calculate the reduction purcentage neddded for all the images fit to the row 
    var purcentageReduction = availableWidth/totalWidth; 
    var finalHeight = maxHeight * purcentageReduction; 
    //set images container to the new height 
    $('.pdf-a-row-images-container').css('height', finalHeight+'px'); 

    //reduce to this purcentage all image size 
    $('.pdf-a-row-images-container > img').each(function(){ 
     var finalWidth = $(this).width() * purcentageReduction; 
     $(this).css("width", finalWidth+'px').css("height", finalHeight+'px'); // change css attributes 
    }); 
} 

Und die html:

<div class="pdf-a-row-images-container"> 
    <img src="urltoimg1" /> 
    <img src="urltoimg2" /> 
    <img src="urltoimg3" /> 
    <img src="urltoimg4" /> 
</div> 

Und für Finish, fewcss Regeln für Spalten- und Zeilenanzeige verwendet:

.pdf-a-row-images-container { 
    white-space: nowrap; 
    line-height: 0; 
    font-size: 3px; 
} 
.pdf-a-column-images-container { 
    white-space: nowrap; 
    line-height: 1px; 
    padding-top: 25px; 
} 
.pdf-a-column-images-container img { 
    display: block; 
    margin: 1px auto; 
    padding: 0; 
} 

Ich weiß es von weit ist perfekt sein, aber wenn es helfen kann :)