이미지 크기 비율 변경 %

Question

페이지 가로 세로 비율이 다른 이미지 (일부는 넓거나 약간 큰 이미지 등)를 추가하고 있습니다.

모든 이미지에 다소 차이는 있지만 왜곡되거나 늘어나지 않게하려면 가장 좋은 방법은 무엇입니까?

나는 이미지가 동일하게하지 않는 것

<img src='admin/userpics/$prodID.jpg' height='50%'> 

이

를 시도?

Answer 1

CSS를 사용하고 싶습니다. 당신이 (내게로) IMG 태그를 좋아하지 않는 경우에

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

Answer 2

<img src='admin/userpics/$prodID.jpg' style='height: 200px; width: auto;'> 

Answer 3

은 단순히 고정 된 값으로 width 또는 height 설정하고, 다른 값으로 auto에

<img src='admin/userpics/$prodID.jpg' style='width:100px;height:auto;'> 

또는

<img src='admin/userpics/$prodID.jpg' style='height:100px;width:auto;'> 

당신이 선호하는 무엇도, 항상 함께 가로 세로 비율 올바른

Answer 4

, 당신은이를 사용할 수 있습니다 (당신이 <를 대상으로하지 않을 경우 = IE8 브래드가 지적) :

div.image { 
    background-size:cover; 
    background-position:center; 
    display:block; 
    width:30%; 
    height:30%; 
} 


<div class="image" style="background-image:url(admin/userpics/$prodID.jpg)"></div> 

증명 : http://jsbin.com/ekogaz/1/edit 이미지가 항상 가운데에 있지만 어떻게 잘리는 지 확인하십시오. 가능한 한 많이 추가 할 수 있습니다. 또한 % (또는 100px)를 사용할 수 있습니다. 창 크기를 조정하면 너무 잘 작동하는 것을 볼 수 있습니다.

Answer 5

사용 픽셀 값 대신 비율입니다. this처럼 :

<img src="smiley.gif" alt="Smiley face" height="42" width="42"> 

Answer 6

는 이미 HTML/CSS로 크기가 조정 된 이미지를 표시하기위한 많은 유용한 답을 가지고,하지만 난 당신이 작은 이미지를 생성하는 것이 좋습니다 대신 사용할 것입니다. 그렇게하면 작은 해상도의 엄지 손가락 만 있으면 전체 해상도 이미지를로드하는 것을 피할 수 있습니다. 특히 이미지가 고해상도이거나 갤러리를 만드는 경우 중요합니다. 또한 이미지에서 수행 한 다운 샘플링의 품질을 제어 할 수 있습니다. 이는 일부 브라우저에서 훨씬 효과적입니다. PHP를 사용하기 때문에이 라이브러리를 확인해보십시오. phpThumb

사용하려는 최대 너비와 높이를 정의하고 가로 세로 비율을 유지하면서 이미지의 크기를 조정할 수 있습니다.

Answer 7

http://jsfiddle.net/7TDCA/

HTML :

<div class="img-wrapper"> 
    <img src="http://i.imgur.com/Himba.png" alt="" title="" /> 
</div> 

<div class="img-wrapper"> 
    <img src="http://cdn.fotocommunity.com/Natur/Tiere/Pfau-Hochformat-a18613762.jpg" alt=""  title="" /> 
</div> 

CSS :

.img-wrapper { 
    margin: 50px auto; 
    width: 50%; 
    height: 250px; 
    overflow: hidden; 
} 

.img-wrapper img { 
    width: 100%; 
    height: auto; 
}