На div с использованием display: flex я сталкиваюсь с проблемой: изображение / эскиз всегда должны быть квадрат в зависимости от высоты родительского элемента.
Высота родительского элемента равна на основе .content текста.
Хотя изображение по умолчанию квадратное, его высота на намного больше , чем у контейнера и должен быть изменен. Если я использую height: 100%, он будет определять 100% высоты изображения, а не высоту родительского элемента.
Можно ли этого добиться всего с помощью CSS?
body {
font-family: sans-serif;
background: #f4f4f4;
}
.element {
display: flex;
align-items: stretch;
justify-content: flex-start;
box-shadow: 0 2px 10px -2px #000;
border-radius: 4px;
/*
* IMAGE
*/
.image {
background: #eee;
position: relative;
overflow: hidden;
min-height: 20px;
min-width: 20px;
&:after {
content: '';
display: block;
left: 0;
top: 0;
padding-top: 100%;
}
img {
height: 100%;
width: auto;
max-width: unset;
vertical-align: bottom;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
/*
* CONTENT
*/
.content {
display: flex;
align-items: center;
padding: 20px 0;
margin-left: 10px;
}
}
<div class="element">
<div class="image">
<img src="https://is2-ssl.mzstatic.com/image/thumb/Purple123/v4/19/46/66/194666a8-7e8d-2a7b-4390-c0688d603582/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/230x0w.png">
</div>
<div class="content">
Wine corned beef strip steak tongue, pork chop chop chop.
</div>
</div>
→ JsFiddle для воспроизведения ответа: https://jsfiddle.net/hmaesta/w3eyz0b7/
Я уже попробовал обходной путь padding-top: 100%, но это работает, если у вас есть ширина - не иначе.