미리보기 이미지에 세로 및 가로 이미지 자동 자르기를 사용하는 경우

Question

저는이 "Tutorial"을 사용하여 포트폴리오에 대한 반응 형 이미지 미리보기 갤러리를 만들었습니다.

이 튜토리얼은 완전하고 교육적인 (나는 큰 멍청이이다.)하지만 한 부분을 다루지는 않는다 : 튜토리얼 제작자는 모두 가로 방향의 이미지를 사용한다.

내 포트폴리오의 경우 미리보기 이미지는 가로 및 세로 이미지를 교대로 사용합니다.

오리엔테이션의 두 가지 종류를 사용하면 일종의 정렬되지 않은 모양과 느낌을 div에 제공합니다. 이는 내가하려는 일이 아닙니다.

이 문제를 해결하는 간단한 방법은 인물 사진을 수동으로 자르기 스타일로 맞추는 것입니다. 그것은 오히려 제가 선호하는 구식 기술입니다.

이 작업을 수행하는 또 다른 방법은 img 태그를 사용하지 않고 이미지 상자에 배경 이미지 및 배경 포함 div를 포함하는 것입니다. 내가 썸네일에 대한 새로운 CSS 클래스를 만드는 것을 의미하기 때문에 무언가를하지 않을 것입니다. (확실하지 않습니다)

누군가가 같은 종류의 문제가 있었지만 jquery를 사용하여 수정했습니다. 나는 CSS를 배우기 때문에 CSS 만 사용하여이 문제를 해결하는 것이 나에게 도움이 될 것이라고 생각합니다. 100 %, 높이 : 100 % 밖으로

는 "Link"

내 주요 제약은 내가 그렇게 폭, 페이지가 응답 체류 할뿐만 아니라, 내 이미지가 가로 세로 비율을 유지해야한다는 것입니다.

내가 바이올린을 만들고 싶다면 그냥 물어 보면됩니다.

독서를 해주셔서 감사합니다. 제 자신이 영어를 제 1 언어로 사용하지 않기를 바랍니다.

편집 : 여기에 <img><div>과 css가 표시되는 바이올린이 있습니다. http://jsfiddle.net/R8B27/ (정확하게 결과가 어떻게 표시되는지 확인하려면 "결과"상자의 크기를 조정하십시오.) L.

Answer 1

여기에서 가장 중요한 문제는 자른 (세로 방향의 이미지로 자른) 이미지의 수직 정렬입니다.

당신이 이러한 이미지의 기본 정렬로 갈 수 있다면

, 이것은 당신이이 기술을 사용할 수 있습니다 만 이미지의 상단이 표시됩니다 의미

FIDDLE

내가 추가 한 CSS를 /에서 수정 당신의 예 :

.galleryItem a{ 
    display:block; 
    position:relative; 
    padding-bottom:50%; 
    overflow:hidden; 
    border-radius: 5px; 
} 
.galleryItem a img { 
    position:absolute; 
    width: 100%; 
    height:auto; 
    display:block; 
}