Добрый день! Помогите с верской картинки. Есть квадратный див с картинкой (точнее галереей) в которой есть картинки как прямоугольные вертикальные и горизонтальные. Как вместить не растягивая их в квадратныйдив.Если ширину ствить 100% тогда горизонтальные картинки получаются обрезанные и наоборот. CSS
* {
box-sizing: border-box;
}
.block {
width: 300px;
height: 300px;
background: yellow;
position: relative;
border: #000 solid 1px;
}
img {
border: #f00 solid 2px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}
<div class="block">
<img src="https://thumb1.shutterstock.com/display_pic_with_logo/518803/129310280/stock-photo-a-bird-s-eye-view-of-shanghai-at-dusk-129310280.jpg" alt="" />
</div>
<div class="block">
<img src="https://thumb1.shutterstock.com/display_pic_with_logo/2324765/484954783/stock-photo-top-view-aerial-photo-from-flying-drone-of-a-hongkong-global-city-with-development-buildings-484954783.jpg" alt="" />
</div>
<div class="block">
<img src="https://thumb7.shutterstock.com/display_pic_with_logo/691720/101264377/stock-photo-new-york-city-street-old-style-image-101264377.jpg" alt="" />
</div>
Вот несколько вариантов:
body{
text-align:center;
}
div {
display: inline-block;
position: relative;
height: 150px;
width: 150px;
margin: 1rem;
overflow: hidden;
}
.one {
border: 4px solid red;
line-height:150px;
}
.one img {
display: inline-block;
max-height: 100%;
max-width: 100%;
vertical-align:middle;
}
.two {
border: 4px solid green;
background-size: cover;
background-position: center;
background-repeat:none;
}
.three {
border: 4px solid orange;
}
.three img {
width: 100%;
height: 100%;
object-fit: cover;
-o-object-fit: cover;
object-position: middle;
}
<div class="one"><img src="http://nwlife.ru/wp-content/gallery/fotooboi-priroda/%D0%BF%D1%80%D0%B8%D1%80%D0%BE%D0%B4%D0%B0-105.jpg"></div>
<div class="one"><img src="http://68.media.tumblr.com/tumblr_megli86khL1rebzwto1_1280.jpg"></div>
<br><div class="two" style="background-image:url(http://nwlife.ru/wp-content/gallery/fotooboi-priroda/%D0%BF%D1%80%D0%B8%D1%80%D0%BE%D0%B4%D0%B0-105.jpg)"></div>
<div class="two" style="background-image:url(http://68.media.tumblr.com/tumblr_megli86khL1rebzwto1_1280.jpg)"></div>
<br><div class="three"><img src="http://nwlife.ru/wp-content/gallery/fotooboi-priroda/%D0%BF%D1%80%D0%B8%D1%80%D0%BE%D0%B4%D0%B0-105.jpg"></div>
<div class="three"><img src="http://68.media.tumblr.com/tumblr_megli86khL1rebzwto1_1280.jpg"></div>
Возможно я неправильно вас понял, но вот это свойство должно помочь
background-size: cover;
И отцентрировать background-position: center;
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Ребят есть у меня готовый код который высчитывает время загрузки того или иного кодав коде предусматривается получение названия субпанели
Всем привет! Задача заключается в том, что есть некоторый скрипт, принимающий ID документа (например, в ссылке https://docsgoogle
Есть код который ищет число в файле, и удаляет его если оно присутствует, а если нет то ничего не делает: