유체 세로 이미지 최대 높이

Question

최대 높이를 사용할 때 유체 이미지에 문제가 있습니다. 450x450 크기의 상자 또는 이미지와 같은 종횡비가 아닌 임의의 상자에 이미지를 바인딩하려고합니다. 이미지의 폭이 450px로 제한되어 있지만 높이가 아니며 이미지가 래퍼 div에서 넘치고 있습니다.

내 코드는 다음과 같습니다

<div class="wrapper"> 
    <div class="container"> 
     <img src="http://i.imgur.com/iw4yOa0.jpg"/> 
    </div> 
</div> 

전체 코드와 CSS를 위해 http://jsfiddle.net/5fuZ5/를 참조하십시오.

jquery를 사용하여이 작업을 수행 할 수 있음을 알고 있지만 자바 스크립트가 필요없는 반응 형 솔루션이 필요합니다.

Answer 1

그래, 비슷한 문제가있어 도움이 될 수 없습니다. 내 상황은 내가 유체 (이미지의 컨테이너 100 % 너비에 맞게) 이미지의 단일 열이 경치 이미지에 잘 작동하지만 세로가 맞으면 너비가 크기 때문에 크고 마른 이미지 (세로)는 너비가 컨테이너에 맞게되어있어 키가 크다.

내 솔루션은 세로 이미지의 경우 컨테이너를 가로 컨테이너의 50 %로 설정 한 다음 이미지 너비 (세로 방향)를 작은 컨테이너에 맞출 경우 컨테이너에 대해 생각하는 것이 었습니다. 그들 비례 (ish).

원하는 와트는 세로와 가로로 사용할 용기가 2 개, 가로가 1 개이므로 원하는 450px의 너비가됩니다. 이제 세로 컨테이너의 너비를 반값으로 만들어 모든 이미지가 같은 종횡비이면 225px (너비의 절반)를 작성한 다음 모두 일치해야하며 구조화 된 그리드를 제공해야합니다. 또는 단일 열이 세로 이미지보다 많거나 적을 경우 조경 이미지가 넓을수록 키가 큽니다.

이 작업을 (잠시 동안)보고 싶다면이 링크를 올려 놓고 내가 어떻게 해결했는지 볼 수 있습니다. 예를 들어, 나는 가난한 코딩에 대해 신음 소리를하지 말아주세요.) 템플릿입니다. 내가 만들고있는 템플릿입니다. 이미지와 열의 이미지가 단일 열에 배치되어 있습니다. 초상화 이미지 (클래스 = 초상) 그러나 이것은 쉽게 div 일 수 있습니다.

http://www.sink140.com/sf-test/single.html

내 주요 요점은 자연적으로 감소 (더 작게 만들기) 이미지를 작성 및 컨테이너의 폭을 조정하여 보자, 그냥 용기를 제어, 높이를 제어하려고 생각 중지하는 것입니다 이미지 높이.

이미지의 종횡비는 일반적으로 세로 방향 이미지와 관련된 종류의 기준이 될 때 레이아웃을 예측할 수 있도록 해줍니다.

호프가 도움이되었거나 다른 아이디어를 줄 수 있기를 바랍니다.