Как показать только часть изображения только с помощью тега img?

В настоящее время все мои изображения выглядят так:

enter image description here

HTML

<img class="photo" src="foo.png" />

CSS

.photo {
   padding: 3px;
   border: 1px solid #000;
   background: #fff;
   width: 64px;
   height: 64px;
   display: block;
}

Это предполагает, что соотношение сторон изображения всегда будет 1:1. Теперь пришло новое требование к проекту, что изображения не должны быть 1:1. Скорее, они могут быть высокими прямоугольниками:

enter image description here

В этом случае я хотел бы показать только самый верхний квадрат изображения:

enter image description here

Как это можно сделать с помощью одного тега <img>? Я знаю, как сделать это с помощью двух тегов - просто оберните img с помощью div, примените дополнение 3px к div и поместите URL как background-image в img. Но я хотел бы знать, как сделать это более чистым способом, без дополнительного тега HTML.

Ответы

Ответ 1

Final Update - проверено IE8 +: Это решение использует уточнение идеи Surreal Dreams об использовании контура для получения границы. Это позволяет упростить перекрестный браузер по сравнению с методом линейного градиента, который я раньше делал. Он работает в IE7, за исключением outline (неподдерживаемый).

Сохранение его как тега img с помощью src сохраняет его семантичным.

A margin: 1px применяется, чтобы дать outline "пространство" в макете, так как по своей природе outline не занимает места. Нулевая высота подавляет основное изображение, и используется прокладка, чтобы создать желаемую высоту для отображения фонового изображения (которое установлено так же, как и основного изображения).

HTML

<img class="photo" src="foo.png" style="background-image: url(foo.png)" />

CSS

.photo {
   padding: 64px 0 0 0;
   border: 3px solid #fff;
   outline: 1px solid #000;
   margin: 1px;
   width: 64px;
   height: 0px;
   display: block;
}

Ответ 3

Собственно, вы можете сделать это с помощью одного тега - одного div. Имеет ли значение, что это не один тег img?

<div style="display: inline-block; width: 50px; height: 50px; background: url(test.jpg);"></div>

Вы никогда не используете тег <img>, вы просто настроили div, и все готово. Задайте размер, добавьте отступы, границу и т.д., И предпочтительнее поместите все повторно используемые стили в класс и установите фоновое изображение на основе каждого div. Вы закончите с этим:

<div class="hip2bsquare" style="background: url(test.jpg);"></div>

CSS

.hip2bsquare {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 3px solid #FFF;
    outline: 1px solid #000;
}

Это использует границу, чтобы добавить белый и контур, чтобы добавить черный. Это, вероятно, злоупотребление моделью коробки, но она должна дать вам визуальную информацию.

Ответ 5

Я думаю, что вы ищете свойство CLIP в CSS:

.photo-clipped {
    position: absolute;
    clip: rect(0px,64px,64px,0px);
}

<img src="some_image.gif" class="photo photo-clipped" />