Обрезать изображение в HTML5

Question

как обрезать изображение в html? У меня есть изображение на сервере-сервере, можно ли на моей веб-странице помещать только фрагментированную часть без явного обрезания и создания нового изображения?

Answer 1

У вас есть два варианта.

1) должен использовать сценарии модификации изображения для воспроизведения обрезанного изображения, например TimThumb (требуется PHP). Это позволит обрезать изображение динамически. С вашего вопроса неясно, не хотите ли вы вообще нового изображения или хотите ли вы просто не создавать его вручную.

2) должен сделать что-то отличное с HTML/CSS. В основном вы создадите контейнер для своего изображения, скройте переполнение и поместите/измените размер изображения внутри него. Это будет что-то вроде этого ...

HTML:

<div class="crop"> 
    <img src="image.jpg" alt=""> 
</div> 

CSS:

.crop { 
    display: block; 
    height: 100px; 
    position: relative; 
    overflow: hidden; 
    width: 100px; 
} 
.crop img { 
    left: -20px; /* alter this to move left or right */ 
    position: absolute; 
    top: -20px; /* alter this to move up or down */ 
}