Обрезать картинку с помощью Javascript или CSS?

Question

У меня есть изображения постоянной ширины (т.е. 100px), но с переменной высотой (может быть 200px, 130px, ... но высота всегда >= 100px).

I 'ищу код CSS или JavaScript, который может обрезать нижнюю часть картинки, чтобы все мои картинки были размером 100x100.

Можно ли это сделать, или я должен использовать какой-нибудь PHP (или другой язык на стороне сервера)библиотека

Answer 1

HTML:

<div id="cutter">
  <img src="..." alt=""/>
</div>

CSS:

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

Answer 2

Да, это можно сделать с помощью CSS.Например:

<div style="background-image:url('stuff.png');width:100px;height:130px;"></div>

Answer 3

Если вам нужно только визуально обрезать изображение, вы можете установить его как фоновое изображение другого элемента на желаемые размеры.

/* CSS */
.imageContainer {
    display: block;
    width: 100px;
    height: 100px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

<!-- HTML -->
<div class="imageContainer" style="background-image: url('path/to/your-image.jpg')"></div>

Answer 4

Использование атрибутов width / height изображений приведет к его масштабированию, чего вы не хотите.Одна из возможностей - поместить каждое изображение в деление 100x100, скрывая переполнение.Единственная проблема здесь, если у вас есть какой-либо альтернативный текст на изображении, он будет обрезан.

<div style="width:100px;height:100px;overflow:hidden;>
    <img src="image.jpg">
</div>

Answer 5

Вы можете установить изображение в качестве фона для div, который был квадрат 100px. Это бы сработало. Особенно, если вы не возражаете, что он каждый раз просто обрезает дно. Вы можете сместить фон, если хотите изменить место его обрезки.

Answer 6

Попробуйте следующее:

<div class="cropContainer">
    <img src="yourImageSrc">
</div>

<style>
    .cropContainer{
        overflow:hidden;
        width:100px;
        height:100px;
        display:block;
    }
</style>