Может ли HTML или CSS придать обрезанный эффект изображению? - PullRequest
Новая
       2

Может ли HTML или CSS придать обрезанный эффект изображению?

2 голосов
/ 30 января 2011

Я не пытаюсь на самом деле обрезать файл изображения.Изображение имеет толстую рамку вокруг, и я просто хочу как-то это скрыть.HTML разметка это.

<div class="imgDiv">
    <img height="200" width="200" src="http://site.com/image.jpg">
</div>

Есть ли способ отцентрировать или изменить размер этого изображения так, чтобы граница исчезла?

Ответы [ 4 ]

2 голосов
/ 30 января 2011

Конечно.Скажем, вы хотите только центр 100x100.Вы можете использовать этот CSS: 

.imgDiv {
    width: 100px;
    height: 100px;
    overflow: hidden;
}
.imgDiv > img {
    position: relative;
    left: -50px;
    top: -50px;
}

Здесь я получил центр 64x64 вашего аватара 128x128, используя эту технику: http://jsfiddle.net/5kHbQ/

0 голосов
/ 30 января 2011

Допустим, на изображении было 10 пикселей с яркими границами. Следующий CSS скрыл бы его из вида: 

.imgDiv { width:180px; height:180px; overflow:hidden; }
.imgDiv img { display:block; margin:-10px 0 0 -10px; }

Альтернативным методом будет использование позиции: 

.imgDiv { width:180px; height:180px; overflow:hidden; }
.imgDiv img { position:relative; top:-10px; left:-10px; }
0 голосов
/ 30 января 2011

Хотя это не основная цель их использования, вы можете использовать CSS-спрайты для удаления границы.

По сути, вы бы использовали div элементы, определенные с высотой и ширинойвы хотите для изображения.

Затем вы должны установить свойство background-image в качестве URL-адреса изображения (будьте осторожны, URL-адрес изображения относительно местоположенияCSS, поэтому будьте внимательны, если вы используете внешний CSS-файл вместо встроенного атрибута style).

Наконец, вы должны установить свойство background-position для смещения изображениятак что он совпадает с элементом div, который вы определили как "frame".

0 голосов
/ 30 января 2011

Вы можете сделать это с помощью css, inline: 

<div class="imgDiv" style="width:200px;height:200px;background:url(http://site.com/image.jpg) no-repeat -20px -20px;"></div>

или в формате css: 

.imgDiv{
  width:200px;
  height:200px;
  background:url(http://site.com/image.jpg) no-repeat -20px -20px;
}

В любом случае, вы удалили бы узел <img> в html.

Поиграйтесь с шириной, высотой и двумя последними значениями фона.

...