CSS를 사용하여 div 내에서 이미지의 비율을 조정하고 위치를 재 지정 하시겠습니까?

Question

div 안에 이미지의 부분 만 표시하려면 CSS를 사용하는 방법을 알고 있지만 이미지는 배경 이미지 여야합니다.

CSS를 사용하여 이미지의 크기를 조절하는 방법을 알고 있지만 이미지는 IMG 여야합니다.

누군가가 크기를 조정하고 이미지를 표시하고 일부만 표시하는 방법을 알고 있습니까?

예를 들어, I는 원하는 행 (100, 100)를 통해

1. 표시 픽셀 (15,15), 200 %의 스케일
2. 그것을.

첫 번째는 배경 이미지로 만들 수 있습니다. 두 번째는 전경 이미지로 만들 수 있습니다. 그러나 지금까지, 나는 둘 다하는 방법을 확인하지 못했습니다. 그것은 CSS/HTML만을 사용하여 가능합니까?

Answer 1

평상시처럼 이미지의 크기를 조절할 수 있습니다. 그런 다음 컨테이너 div를 사용하여 이미지를 자릅니다. 자르기 사각형의 위치를 ​​설정하려면 이미지에 position: relative을 사용합니다 (포함 된 div가 아님). 다음은 stackoverflow의 로고를 사용한 예입니다.

<style type="text/css"> 
div { 
    /* Set size of crop area. Setting its location happens bellow. */ 
    width: 150; 
    height: 100; 
    overflow: hidden; /* Crop it like it's hot! */ 

    /* not part of the implementation; only to display what's going on */ 
    border: 1px solid black; 
    background-color: #ddd; 
} 

img { 
    /* Set the crop location by shifting the image 
    * up by 70px and to the right by 30px. 
    */ 
    position: relative; 
    top: -70px; 
    left: 30px; 

    /* Scale the image as you normally would. */ 
    width: 300px; 
    height: 150px; 
} 
</style> 

<div> 
    <img src="http://sstatic.net/so/img/logo.png"> 
</div>