반응 형 포트폴리오 갤러리 이미지 크기 조정

Question

나는 WordPress를 사용하여 반응 형 포트폴리오 웹 사이트를 만들고 있습니다. 레이아웃을 위반하는 작은 문제가 있습니다. 모든 이미지의 너비는 300px, 높이는 200px입니다. 위에서 언급 한 치수보다 큰 사용자 업로드 이미지

add_image_size("portfolio", 300, 200, true);

이것이 나를 위해하는 일은이 이미지에 width="300" 및 height="200" 특성을 삽입하는 것입니다 경우 는 또한 이미지를 자르려면 워드 프레스 API를 사용했다 자동으로 (그러나 이미지의 원래 크기는 그대로 유지됩니다.) 브라우저 창의 크기를 조정하려고 할 때를 제외하고는 잘 작동합니다 ..

다음은 클라이언트입니다. 클라이언트가 300px 크기의 이미지를 업로드합니다. 및 210px 높은 .. 처음에는 크기가 조정되고 따라서 레이아웃이 표시됩니다. 완벽하지만 브라우저의 크기를 조정하면 이미지의 크기가 조정되지만 "원본 크기"와 관련하여 .. 원래의 높이가 210px 인 이미지는 나머지 이미지보다 커집니다. 이미지를 3 열 레이아웃으로 만들려면 높이의 차이로 인해 레이아웃이 손상됩니다 (이 큰 이미지 아래의 열을 오른쪽으로 이동하고 그 아래에 빈 열을 남겨 둡니다).

이 문제를 어떻게 해결합니까? timthumb을 사용하여 디스플레이되기 전에 모든 이미지의 크기를 조정할 생각이었습니다. 따라서 이미지의 원래 치수를 즉시 변경하지만 이것이 효율적인 방법이 아닌 것 같습니까? 이 문제에 대한 다른 해결책은 무엇입니까? 또한 jQuery Masonry와 같은 것을 사용하고 싶습니다. 유지할 특정 레이아웃이 있습니다.

감사

Answer 1

당신은 동등하게 모든 이미지의 높이를 제한하는 CSS에서 최대 높이 규칙을 사용할 수 있습니다.

예 :

.gallery img{ 
    max-height: (some height); 
} 

높이에 대한 사용 % 나 안에 픽셀이 반응 디자인에서 잘 작동하지 않을 수 있습니다.