jquery multiple img 동일 높이의 고정 높이 컨테이너에 담기

Question

이 문제는 쉽게 해결할 수 있었지만 몇 시간 동안 검색 한 후에는 최종적으로 도움을 얻으려면 여기에 게시하십시오.

저는 고정 된 높이와 너비의 컨테이너를 가지고 있습니다. 큰 열로 생각해 봅시다.

3 개의 이미지가 다른 크기로 표시됩니다. 크기가 변경 될 수 있습니다.

세로로 채우기 위해 이미지의 크기를 조정하고 (가로로 채울 필요가 없음) 모든 너비가 같아 지도록하고 싶습니다. ("열"모양)

가로로 수행하는 jquery 플러그인 솔루션 : jpictura가 있습니다. 3 개의 사진을 찍은 다음 정확하게 같은 행을 채우기 위해 가능한 한 크게 표시합니다.

하지만 지금은 가로 방향 대신 세로 방향으로 검색하고 있습니다.

1000px 높이와 800px 최대 너비의 컨테이너를 상상해 봅시다. 그것을 표시 할 그리고 : 3 이미지 을 img1 : 800 픽셀 * 49 픽셀 IMG2 : 300 픽셀 * 800 픽셀, img3 : 1800px * 49 픽셀

내 날 (JQuery와의) 그 단계를 수행하기에 말을 논리적 :

을

1. 3 개의 이미지가 컨테이너의 너비가 100 % 일 때 총 높이를 계산합니다.

2. 용기 높이에 맞추기 위해 전체 높이를 얼마나 줄여야하는지 계산합니다.

3. 이 비율에 따라 각 이미지 크기를 줄입니다.

그러나 나는 의심이 가득 해요 ...

그리고 어쩌면 jQuery 플러그인은 깨끗하고 안정적인 방법으로이 일을 위해 존재한다. 그러나 그것을 찾을 수 없었던 것은 나만의 것이 었습니다. 또는 최악의 경우! 나는 그것을 발견하고 그것을 시도하지만, 좋은 방법으로 그것을 사용할 수 없습니다 .. ^^

어떤 생각?

감사

[편집] 여기에 내가하고 싶은 것을 보여주기 위해 몇 가지 exemples을합니다. 이미지는 컨테이너의 높이를 100 % 사용하여 비율을 잃지 않고 모두 동일한 너비를 갖습니다.

Answer 1

나는 마침내 조금 스크립트, 마침내 :

나는 기능을 최적화 할 수 있습니다 생각

, 나는 JQuery와에 대한 전문 열심히하지 아니에요을 쓴 ... 어쨌든 그것은 나를 위해 일합니다. 모든 이미지를 가져 와서 같은 너비로주고 열의 전체 높이에 맞 춥니 다. 정밀도 : 제 경우에는 PDF로 멋지게 사진을 표시하는 데 사용했기 때문에 A4 크기의 PDF 내용에 맞게 너비와 높이 값을 고정 시켰습니다. 표시하려고하는 이미지의 수와 상관없이 작동합니다.

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 
     }); 
    } 
} 

및 HTML 매우 간단 : 다른 사용을 위해

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

는 I 컬럼 대신에 동일한 기능을했으나 (가로) 행의 이미지에 맞는 . 동일한 높이로 줄의 100 %를 차지하는 단일 행에 이미지를 표시합니다.

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 
    }); 
} 

그리고 HTML :

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

그리고 마무리, fewcss 규칙, 열 및 행 표시 사용에 대한

: 나는 그것을 알고

.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; 
} 

부터 지금까지의 완벽 하긴하지만 도움이된다면 :)