CSS에 비례하여 이미지의 크기를 조절할 수 있습니까?

Question

CSS로 비율을 유지하면서 이미지의 크기를 조정할 수 있습니까?

컨테이너는 고정 폭과 높이

<div class="container"> 
    <img class="theimage" src="something" /> 
</div> 

내가 레이아웃 (A 클래스를 통해 아이콘을 목록에서) 변경할 수 있기 때문에 부탁 해요와 이미지 크기를 조정해야하는 이유 (약있다 40 % 적음).

JavaScript를 사용하여 CSS로 크기를 조절하는 방법을 알고 있지만, 실제로 영리한 방법이 아니라면 CSS가 비율 인으로 이루어질 수 있다고 생각하지 않습니다. 당신은 규모의 환경 ... :)

그게 전부를주고 싶어하는 방법에 따라

Answer 1

.theimage{ 
    width:100%; 
    height:auto; 
} 

또는

.theimage{ 
    width:auto; 
    height:100%; 
} 

.

Answer 2

이미지 비율을 저장하려면 크기 조정 중에 object-fit CSS3 돌출 부분을 사용할 수 있습니다.

유용한 기사 :의 Control image aspect ratios with CSS3

img { 
    width: 100%; /* or any custom size */ 
    height: 100%; 
    object-fit: contain; 
}