이 사이트는 이미지를 자르므로 이미지가 수직으로 정렬됩니다.

Question

뭔가 비슷한 레이아웃을 만들고 싶을 때 나는 www.piccsy.com을보고 있었고 사진이 미리보기 이미지에서 잘려서 때때로 수직 정렬이 위아래에서 완벽하다는 것을 알게되었습니다.

이 비율을 계산하는 방법에 대한 아이디어가 있으십니까?

Answer 1

웹 사이트의 크기는 다양합니다. 전체 이미지의 작은 클립을 원한다면 이렇게하십시오. CSS 클립 속성을 사용하여 만듭니다. CSS2.1의 일부입니다.

<a href="http://angrybirdsgamer.com/wp- content/uploads/2011/07/com.rovio_.angrybirds_icon.png"> 

    <img height=100 width=150 src="http://angrybirdsgamer.com/wp-content/uploads/2011/07/com.rovio_.angrybirds_icon.png"> 
    </a> 

는 희망이 도움이 :

<div class="myclipwrapper"> 
    <div class="clip"> 
     <img src="http://angrybirdsgamer.com/wp- content/uploads/2011/07/com.rovio_.angrybirds_icon.png" /> 
    </div> 
</div> 


.clipwrapper{ 
     position:relative; 
     height:225px; 
    } 
    .clip{ 
     position:absolute; 
     clip:rect(50px 218px 155px 82px); 
    } 

그러나 특별히 축소판을 보여주고 싶은 경우에 나는이 방법을 사용하는 것이 좋습니다.