Есть такого рода код (ниже привел), в нем я модной зеленой dotted
линией указал, можно сказать, всю проблему: как заставить article
иметь 100% ширину помещенной в него картинки?
Лехчайшим образом можно взять из этой картинки все параметры через js и засунуть их в атрибуты блока article
, но увы! Так делать нельзя, ведь если посмотрите в css, то там используются vh, ну и вообще, там много свойств, которые намекают вам, что всё должно легко ресайзится.
Имеется codepen, если надо поиграться.
body {
margin: 0;
padding: 0;
}
.overlay {
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
width: 100%;
height: 100%;
background: rgba(255, 0, 153, 0.3);
}
.overlay article {
display: inline-block;
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-height: 70vh;
margin: auto;
text-align: center;
outline: 1px dotted green;
}
.overlay article img {
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
margin: auto;
}
<div class="overlay">
<article>
<img src="https://unsplash.it/300/400" />
</article>
</div>
inline-block
, но он не работает с абсолютным позиционированием по всей видимости. Ну а высота ограничиваетсяmax-height: 70%
, но это дизайнерская фича и к вопросу не имеет никакого отношения.position: absolute
?