Просмотр поста

.
Blade
The Frontend-Warrior
Добавлено: 02.05.2017 / 01:21
# Scorpion (01.05.2017 / 15:44)
как сделать вывод изображения 1x1 не растягивая картинку? Можно элементами css или нужно резать с PHP?
Опиши попроще проблему. А еще лучше напиши структуру html кода, как она выводится

Добавлено: 02.05.2017 / 02:28
если надо вставить картинку, а часть, которая не влезла в масштаб 1х1, обрезать, то можно попробовать такой код (не помню как делать для любых изображений, написал под альбомные ориентации картинок)

css (+/-)
.image-container {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  outline: 1px solid black;
}

.image-container img {
  position: absolute;
  min-height: 100%;
  max-height: 100%;
  min-width: 100%;
  
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}


html (+/-)
<div class="image-container">
    <img src="https://img3.goodfon.ru/original/1920x1080/e/5a/scorpion-mortal-kombat-x-boec.jpg?d=1" alt="image" />
</div>