2012-01-23 3 views
3

정말 스택 오버 플로우에서 다른 곳에있을 거라고 생각했지만 시간 낭비없이 검색했습니다. 내가 그것을 놓쳤다면 용서해주십시오.javascript없이 이미지 종횡비를 유지하면서 최대 높이 및 너비로 유연한 CSS 이미지 크기를 조정하려면 어떻게해야합니까?

컨테이너 폭이 너무 넓지 않거나 이미지가 너무 커야 컨테이너 너비로 인해 이미지의 크기가 가능한 한 커야합니다 (너비는 컨테이너 엘레멘트에 100 %). 종횡비는 보존해야합니다.

는 내가 아이디어는 이미지가 최대 폭이나 너비와 화면 비율을 제공 최대 높이 중 하나를 공격하면, 더 이상 성장하지 않을 것이다이었다

img { width: 100%; height: auto; max-width: 500px; max-height: 250px; } 

이 할 수 있다고 생각. 현실적으로 이미지 너비가 가능한 한 넓어 지지만 높이가 너무 커지면 이미지가 더 커지지 않으므로 가로 세로 비율이 깨집니다 (이미지를 최대 높이로 누름).

더 좋은 방법이 있나요? 가능하다면 자바 스크립트를 피하고 싶습니다. 내 테스트 당신은 고정 된 이미지 크기의 계단 형을 만들기 위해 미디어 쿼리를 사용하여 다음과 같이 갈 수있는 파이어 폭스 9

+0

: 여기

그것에 대해 좋은 기사입니다. – Blender

+0

그게 내가 걱정 한거야. 고마워, 블렌더 – jxn

답변

1

에 있습니다

@media screen and (min-width: 701px) and (max-width: 900px) { 
    img { 
     width: 800px; 
     height: auto; 
    } 
} 

@media screen and (min-width: 901px) and (max-width: 1100px) { 
    img { 
     width: 1000px; 
     height: auto; 
    } 
} 

아주 예쁜하지 않습니다, 그러나 그것은 작동합니다.

+0

고마워, 그게 내가 원하는 건 아니지만,이 문제를 해결할 가장 가까운 것 같아. – jxn