이미지 축소판 그림의 가로 세로 비율을 유지하는 방법

Question

이미지 축소판의 가로 세로 비율을 유지하여 부숴 보이지 않게하는 방법은 무엇입니까?

protected function DisplayPhoto($Sender) { 
     $body = $Sender->EventArguments['Discussion']->Body; 
     preg_match('#\<img(.+?)src=(.+?)\>#s', $body, $matches); 
       if(isset($matches[2])){ 
        $image = "src=" . $matches[2]; 
        echo '<img class="ProfilePhotoSmall"' . $image . '>'; 
       }else{ 
        //do what you want 
       }  
    } 

여기에 CSS가 있습니다.

ul.Discussions li img { 
height: 60px; 
width: 110px; 
padding: 0 6px 0 4px; 
float: right; 
position: relative; 
} 

.Discussion.ItemContent { 
padding-right: 0px; 
padding-bottom: 10px; 
display: inline; 
} 

Answer 1

나는 당신이 이미지 크기 변경을 참조하지 않지만, 논리는 다음과 같이 될 것입니다 :

하는의 당신이 300px width 및 150px height의 이미지가 있다고 가정 해 봅시다.
여기에서 2 인 비율을 찾습니다. 그리고 이미지에 새로운 너비를 주면, 예 : 250px.
250px/2으로 나누어 해당 높이를 찾습니다. 새 너비는 250px이고 높이는 125px입니다.

그것은 힌트 당신에게 당신이 CSS로 이미지의 크기를 조정할 수 없습니다

참고를 제공하는 기본 논리가 그냥, 그냥 사용자를 위해 크기를 조정합니다. 대신 CSS에서 width 및 height 규칙을 모두 지정

Answer 2

을 필요 이상 그것은 단순히 (한 당신이 스케일링을 원하는 방식에 따라 달라집니다) 중 하나를 지정 더 큰 이미지를로드합니다. 하나의 생략은 브라우저 종횡비 유지하는 것이다 : 위의 코드 110px 폭으로 리사이즈 할

ul.Discussions li img { 
    width: 110px; 
    padding: 0 6px 0 4px; 
    float: right; 
    position: relative; 
} 

, 그리고 높이가 브라우저에 의해 자동으로 계산된다.