CSS - Вырезать изображение без изменения размера?

Question

Например, у меня есть большое изображение 500x500, и у меня есть небольшой квадрат 100x100.

Я не хочу, чтобы изображение было увеличено, поэтому как я могу показать его отрезанным?

Если я risize, было бы остаться как это:

| ------- |
| ------- |
| ------- |
| ------- |

Если я вырезал его, только смелая вещь будет happear:

| ---- --- |
| ---- --- |
| ------- |
| ------- |

Answer 1

Если вы хотите, вы можете использовать background-image свойство с помощью CSS, а не использовать background-position, чтобы установить изображение в соответствии с

Если у вас есть элемент, скажем, 100px х 100px и изображение с размерами 300px х 300px

HTML

<div class="demo"></div> 

CSS

div.demo { 
    background-image: url('PATH_TO_IMAGE'); 
    background-position: 30px 100px; 
    background-repeat: no-repeat; /* Just to be sure it won't repeat, 
            even if you resize the element*/ 
    /* 30px - X Axis, 100px - Y Axis */ 
} 

Answer 2

может я уверен попробовать этот HTML источник

<div class="cropimg"> 
    <img src="..." alt="..." /> 
</div> 

попробовать этот источник CSS:

.cropimg{ 
    width: 100px ; 
    height: 100px; 
    overflow: hidden; 
    background-color:blue; 
} 

.cropimg img { 
    width: 500px; 
    height: 500px; 
    margin: -75px 0 0 -100px; 
    background-color:red; 
} 

Answer 3

Вы можете дать ширину и высоту для этого изображения

Пример:

div.img{ 
     width:100px; 
     height:100px; 
     padding:0px; 
     margin:0px; 
     } 

Answer 4

Вы можете применить свое изображение как фон к некоторому элементу и исправить ширину/высоту этого элемента.

Demo

#pic { 
    background: url('pic_url'); 
    width: 300px; 
    height: 200px; 
} 

Answer 5

простой способ сделать это

HTML:

<div id="myimg"></div> 

CSS:

#myimg{ 
     backgroung-image: url("myimg.png"); 
     background-repeat: no-repeat; 
    }