본문의 너비와 높이가있는 이미지의 종횡비 제어

내 사이트에이 두 이미지가 표시되어 다른 회사의 서버에서 당겨집니다. 이 사진들을 브라우저 창으로 크기 조정할 필요가있어서 몸에 맞게 너비와 높이를 지정했습니다.본문의 너비와 높이가있는 이미지의 종횡비 제어

이 이미지 중 일부는 크기가 다르고 모든 이미지가 동일하게 보이도록해야합니다. 크기를 조정하거나 크기를 조정할 수 있기 때문에 이미지의 너비와 높이의 값을 알면 쉽게 적용 할 수 있습니다. 그러나 확장 가능한 너비와 높이의 비율을 어떻게 유지할 수 있습니까?

일부 JavaScript가 필요하다고 생각합니다. 여기 내가 가지고있는 CSS는 다음과 같습니다.

html { 
    width: 100%; 
    height: 100%; 
} 
body { 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
} 
.image { 
    width: 40%; 
    height: 40%; 
    margin: 1%; 
}

출처

2012-10-17 AzzyDude

이미지가 혼합 된 방향입니까, 아니면 모두 가로 또는 세로입니까? 일반적으로 너비 또는 높이 중 하나를 백분율로 설정하고 다른 하나는 자동으로 설정하지만 혼합 된 방향을 사용하려면 이미지에 클래스를 첨부하여 어느 방향인지 식별해야합니다. – cimmanon

모두 풍경입니다. 그것은 다소 변동하는 높이 일뿐입니다. – AzzyDude

CSS 만 사용하면 모든 broser를 최적화하는 데 많은 시간이 필요합니다. 당신은 당신이 IE8에 대해 우려하지 않은 경우 Perfect background image

출처

2012-10-17 12:56:32 easwee

사용하여이를 수있는 몇 가지 수정 및 JS와

, 당신은 단지 width을 지정할 수 있습니다. 대부분의 브라우저는 화면 비율을 유지합니다.

출처

2013-05-15 22:35:46

본문의 너비와 높이가있는 이미지의 종횡비 제어

답변

관련 문제