작은 이미지를 큰 이미지 CSS로 변환하는 방법

Question

왜곡되지 않고 이미지의 크기를 조정할 수 있습니까?

나는 70px 크기의 축소판 이미지가 있으며 종횡비를 유지하면서 크기를 200px x 165px로 조정해야합니다. 현재 너비 : 200px 및 높이 : 165px를 설정하면 펼쳐집니다. 여기

코드입니다 : 그것은 품질의 손실이 발생할 것 스트레칭, SVG 또는 벡터 형식의 이미지의 유형이 아닌 경우,

CSS

.listing-img-div { 
    width: 200px; 
    height: 165px; 
} 

.listing-img { 
    border: 1px solid black; 
    margin-top: 5px; 
    border: 1px solid #ddd; 
    width: 100%; 
    height: 100%; 
} 

HTML/PHP 

echo '<div class="listing-img-div">'; 
    echo '<img class="listing-img" src="'.$img.'" alt="'.$title.'">';              echo '</div>'; 

Answer 1

같은 유형 때문에 JPG, BMP, PNG는 손실 유형입니다.

간단한 크기 조정은, 그러나, 가로 세로 비율을 유지함으로써과 같이 얻을 수있다 :

img { 
    height: 165px; 
    width: auto; 
    max-width: 200px; 
    max-height: 165px; 
} 

또는

img { 
    height: auto; 
    width: 200px; 
    max-width: 200px; 
    max-height: 165px; 
} 

설명 :

당신은 고정 폭 또는 고정 중 하나를 제공 기본적으로 높이. 어느 쪽이든 당신에게 더 중요합니다. 나머지 매개 변수의 크기를 자동으로 조정하므로 자동으로 적용됩니다. 그 후에 이미지 크기를 조정할 추가 속성으로 덮어 쓰기 때문에 크기를 조정해야하는 경우 IE6 이하에서는 max-width/max-height가 작아지지 않습니다. 고정 크기로 폴백.

Answer 2

너비를 auto, 높이를 100%으로 설정할 수도 있습니다.

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

그리고 이미지가 vector 아니거나 SVG하지 때까지 다른 사람이 말했듯이 항상 품질의 손실됩니다

.