전체 너비, 제한된 가로 세로 비율을 유지하면서 높이 이미지

표지 이미지처럼 보일 이미지를 다시 만들려고합니다. here. 이미지는 브라우저의 전체 폭이어야하지만 특정 고정 높이를 유지해야합니다. 이 모든 것을 가지고, 여전히 종횡비를 유지해야합니다.전체 너비, 제한된 가로 세로 비율을 유지하면서 높이 이미지

설정 width: 100%; height: auto;은 이미지를 가로 세로 비율로 전체 너비로 만듭니다. 그러나 높이는 꺼져 있습니다. width: 100%; max-height: 300px;으로 설정하면 화면 비율이 손실됩니다.

나는 가능할 수도 있지만 (위의 링크 참조) 나는이 결과를 얻는 방법을 알 수 없다. 몇 가지 조언을 부탁드립니다.

2013-04-17 stefanie

고정 된 높이를 초과하는 이미지 부분을 "잘라내야"합니다. 그래서 이미지의 부모 컨테이너에이 스타일을 설정 :이 시도했습니다

#image-container { height: 300px; overflow:hidden; }

2013-04-17 01:34:03

하지만 가능한 여전히 전체의 이미지를 얻을 수 있는지 궁금 해서요? – stefanie

@stefanie : 이미지에 '고정 높이', '유동적 인 100 % 너비'및 '종횡비'를 유지하고 싶습니다. 이게 가능하다고 생각하니? –

답변