%의 너비와 높이의 %에서 이미지를 자르는 방법

Question

나는 몇 개의 링크를 시도했지만 아무 것도 결실을 맺지 못했습니다. 나는이

http://www.w3schools.com/cssref/pr_pos_clip.asp

일하고 있지만 내 경우에는 내가 "%"에 오히려 일부 미리 정의 된 픽셀 값을 넣는 것보다 이미지를 클립합니다. 그러나 나는 이것을 할 수 없다.

어떻게 달성할까요 ??

Answer 1

Clip property은 아직 백분율을 지원하지 않습니다. 이 효과를 얻으려면 다음 중 하나를 수행하십시오.

1) 이미지를 div로 감싸고 퍼센티지 너비와 높이를 설정하고 오버플로 : 숨김; 예를 들어

<div id="test"> 
    <img src="https://www.google.com/images/srpr/logo11w.png"> 
</div> 

div#test { 
    width: 200px; 
    height: 100px; 
    overflow: hidden; 
} 

JSFiddle

2) 대신에 화상 비율의 폭과 높이 및 배경 이미지로 설정된 이미지와 DIV를 사용한다.

3) 이미지를 렌더링하고 작업 한 후에 필요한 너비와 높이를 계산하려면 javascript를 사용하십시오.

Answer 2

백분율로 표시하려면 이미지와 동일한 크기를 가진 추가 래퍼 div를 사용하십시오.

다음 CSS와 HTML을 시도해보십시오.

HTML

.wrapper{ 
    width : 200px; 
    height : 140px; 
} 
/* Below width and height are in percentage w.r.t. those in 
    'wrapper' class whose width and height are same as image. 
*/ 
.imgContainer{ 
    width : 50%; 
    height : 50%; 
    overflow : hidden; 
} 

확인이 fiddle

<div class="wrapper"> 
    <div class="imgContainer"> 
     <!-- NOTE: image dimensions are same as in "wrapper" class--> 
     <img src="path/to/img.jpg" width="200" height="140" /> 
    </div> 
</div> 

CSS.