Как можно кадрировать изображение в css, svg

Question

Допустим, есть изображение:

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/ET_Afar_asv2018-01_img07_Lake_Karum_area.jpg/1200px-ET_Afar_asv2018-01_img07_Lake_Karum_area.jpg">

Нужно изменить соотношение сторон на 1:1 не нарушив размеров, вот так:

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

Answer 1

Вот мой вариант:

div {
  width: 300px;
  height: 300px;
  overflow: hidden;
  border-radius: 15px;
}

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/ET_Afar_asv2018-01_img07_Lake_Karum_area.jpg/1200px-ET_Afar_asv2018-01_img07_Lake_Karum_area.jpg">
</div>

Answer 2

@Voprositel, ваш вариант ответа полностью решает поставленную задачу. Потому как:

Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

Значение hidden отображается только область внутри элемента, остальное будет скрыто. Что по своей сути и является инструментом для кадрирования.

Приведу еще один вариант кадрирования - с помощью свойства clip-path. Но скорее это будет являться кадрированием лишь условно. Подробно о маскировании CSS. Однако, формулировка в данном случае для нас не столь важна, главное - получить нужный результат. Вот пример:

div {
  clip-path: polygon(0 0, 300px 0, 300px 300px, 0 300px);
}

<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/ET_Afar_asv2018-01_img07_Lake_Karum_area.jpg/1200px-ET_Afar_asv2018-01_img07_Lake_Karum_area.jpg"></div>

Answer 3

Для кадрирования изображения можно использовать pattern и mask

Идея такая:
квадратный паттерн разделит пространство на квадраты с соотношением сторон 1:1

<pattern id="p1" width="100px" height="100px" patternUnits="userSpaceOnUse">
   <path d="M 98 0 L 0 0 0 98 98 98z" fill="white" stroke="white" stroke-width="1"/>
 </pattern>

Но он не сработает, если его наложить сверху на растровое изображение.

Поэтому нужно поместить паттерн внутри маски, а маску применить к растровому изображению.

Используется cвойство маски при fill="white" показывать изображение в каждом квадратике паттерна.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
       
     width="100%" height="100%" viewBox="0 0 1200 800" >  
<defs>
 <mask id="msk1" > 
  <rect fill="url(#p1)" width="100%" height="100%"  /> 
 </mask>
 <pattern id="p1" width="100px" height="100px" patternUnits="userSpaceOnUse">
   <path d="M 98 0 L 0 0 0 98 98 98z" fill="white" stroke="white" stroke-width="1"/>
 </pattern> 
</defs>
<g mask="url(#msk1)" > 
 <image  xlink:href="https://i.stack.imgur.com/EMO9n.jpg" width="100%" height="100%" />
</g>
</svg>

Берем более мелкий паттерн 10Х10px

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
       
     width="100%" height="100%" viewBox="0 0 1200 800" >  
<defs>
 <mask id="msk1" > 
  <rect fill="url(#p10)" width="100%" height="100%"  /> 
 </mask>
  <pattern id="p10" width="10" height="10" patternUnits="userSpaceOnUse">
        <path d="M 9 0 L 0 0 0 9 9 9" fill="white" stroke="white" stroke-width="1"/>
      </pattern>
      
</defs>
<g mask="url(#msk1)" > 
 <image  xlink:href="https://i.stack.imgur.com/EMO9n.jpg" width="100%" height="100%" />
</g>
</svg>

Используем полупрозрачность маски при fill="red"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
       
     width="100%" height="100%" viewBox="0 0 1200 800" >  
<defs>
 <mask id="msk1" > 
  <rect fill="url(#p1)" width="100%" height="100%"  /> 
 </mask>
 <pattern id="p1" width="100px" height="100px" patternUnits="userSpaceOnUse">
   <path d="M 96 0 L 0 0 0 96 96 96z" fill="red" stroke="white" stroke-width="3"/>
 </pattern> 
</defs>
<g mask="url(#msk1)" > 
 <image  xlink:href="https://i.stack.imgur.com/EMO9n.jpg" width="100%" height="100%" />
</g>
</svg>

Приложение адаптивно, работает во всех современных браузерах, включая Microsoft Edge

БЛОГ НА HUSL

Как можно кадрировать изображение в css, svg

Ответы (3 шт):