Маска для изображения средствами чистого CSS.

Здравствуйте уважаемые читатели. 

Сегодня   я хочу  поднять вопрос создания  маски  изображения  с помощью обычного CSS.   Очень часто  сталкиваешься с ситуацией  когда  заранее не  знаешь размер  фотографии,  но нужно что бы выглядело всё аккуратно и  с одинаковыми размерами.  В  этом случае  нам  на  выручку приходит создание  маски  картинки.

И так  для  того что бы создать маску  для изображения  мы пишем следующую html конструкцию:

<div class=»obviazimg»>

<img src=»images/images-new-postuplenia.png» alt=»»/>

</div>

То есть  мы  вписываем картинку  в обвязывающий div  что позволит нам  сделать  маску в виде  обвязывающего дива.   

Далее  к  этим  2  элементам  мы применяем  CSS стили:

.obviazimg {

  width: 213px;

height: 249px;

overflow:hidden;

}

img {

  width: initial;

  height: 97%;

  margin: 2% -55% 16% -57%;

}

Теперь немного поясню данные стили.   в стиле  .obviazimg  мы  задаём  ширину и высоту нашего элемента,  тоесть видимую часть картинки, и  что бы  данный  элемент сработал как  маска,  нужно сделать  его  невидимым,  это делает его маской, для  всех вложеных элементов.  В  стиле  для  картинки задаём её высоту  и  ширину,  margin  в  данном случае  отвечает  за  настройку  положения  картинки внутри блока,  изменяя параметры margin можно двигать и  задавать  ту часть картинки которая  будет видна  внутри маски.

Этот  несложный код позволит решить проблемы например при создании каталога  с разными по величине  картинками.    

Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *