이미지를 표준 크기로 늘이지 않고 최소 크기로 렌더링하십시오.

Question

각각 101x155의 격자 모양으로 프로파일 이미지를 렌더링해야합니다.

일부 이미지가 너무 작거나 너무 크거나 대부분 이미지 비가 올바르지 않습니다.

최소 너비와 높이, 왜곡이없는 img를 어떻게 표시하고 원하는 크기로 표시합니까?

Answer 1

실제로 이미지를 수정하지 않고도 몇 가지 옵션을 사용할 수 있습니다.

img { max-width: 101px max-height: 155px } 

이렇게하면 이미지가 101x155 픽셀 너비를 넘지 않게됩니다. 그들은 완벽한 종횡비가 아니기 때문에 종횡비가 완벽하지 않은 경우 이미지의 측면에 여전히 공백이 생깁니다.

또 다른 방법이 완벽하지 않은 용기

<div><img .../></div> 
div {width: 101px; height: 155px; overflow: hidden} 
img {width: 101px;} /*or do height: 155px)*/ 

에서 그들을 싸는하는 것입니다하지만 당신에게 다른 결과를 제공합니다. 이렇게하려면 모든 이미지에 대해 이미지의 키가 커지거나 넓어야합니다.

가장 좋은 방법은 크기를 조정하는 것입니다,하지만 우리는 항상 우리의 방법이 없습니다 알고 : 어떻게 어떤 jQuery를에 대한

Answer 2

를? 당신은 단지 포함하면 <img>class="grid-img"과 :

$(".grid-img").each(function(i){ 
    var width = $(this).width(); 
    var height = $(this).height(); 
    var ar = height/width; 
    if(width > 101) { 
     var newWidth = 101; 
     var newHeight = 101 * ar; 
    } else { 
     var newHeight = 155; 
     var newWidth = ar/newHeight; 
    } 
    $(this).height(newHeight); 
    $(this).width(newWidth); 
}); 

무엇이이해야 할 것은 : 이미지의 폭이 너무 큰 경우, 폭에 따라 그 (가로 세로 비율을 유지) 크기를 조정합니다. 그렇지 않다면 높이에 따라 크기를 조정하십시오 (다시 AR 유지).