Pinterest와 같은 동적 이미지 높이를 어떻게 얻을 수 있습니까?

Question

Pinterst와 비슷한 레이아웃을 얻으려고합니다. 지금까지 나는 무작위로 125px와 400px 사이의 PHP에서 생성 된 이미지가 있습니다.

오른쪽 종횡비가 동적 인 것처럼 보이는 Pinterest와 같은 효과는 발생하지 않았습니다. 누구 Pinterest 동적으로 이미지의 높이를 생성하는 방법을 알고 있습니까?

<div class="pin_image"> 

      <a href="<?php the_permalink(); ?>"><img width="191" height="auto" class="<?php echo $img_class; ?>" 
      src="<?php echo PricerrTheme_get_first_post_image(get_the_ID(),102,72); ?>" /></a> 
      </div>  

Answer 1

이미지 폭은 열 너비를 기준으로합니다. 예를 들어, 열의 너비가 200 픽셀이고 원본 이미지의 높이가 600 픽셀이고 너비가 400 픽셀이면 열 너비에 맞게 이미지의 크기를 반으로 줄입니다. 따라서 600px * 0.5 = 300px 높이, 400px * 0.5 = 200px 너비 두 비율을 같은 비율로 곱하면 가로 세로 비율이 유지됩니다.

Answer 2

당신은 그것은 이미지 높이를 변경하지 않습니다 Isotope 또는 Masonry

같은 뭔가가 필요하지만 즐거운 방법으로 레이아웃을 재정렬.

Answer 3

이미지의 크기를 조정할 때 이미지의 너비에 따라이를 수행해야합니다. 당신이 원하는 것은 고치는 것과 popotionate의 높이입니다. 예를 들어 1000에서 2000까지의 이미지가 있고 열이 100px 인 경우 100에서 200으로 크기를 조정해야합니다. 즉 너비의 비율을 계산하여 높이에 적용하십시오.

Answer 4

태그 너비를 열 너비의 너비로 설정해야합니다. 이미지의 종횡비가 유지되고 그에 따라 높이가 설정됩니다.