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