svg {
transform: translateZ(0);
}
div {
margin: auto;
width: 100vw;
height: 75vw;
}
@media screen and (min-aspect-ratio: 4/3) {
div {
width: 133.33vh;
height: 100vh;
}
}
<div>
<svg viewBox="0 0 1 1"></svg>
<p>А что внутри?</p>
</div>
div {
display: table-cell;
box-shadow: 0 0 5px red;
position: relative;
}
svg {
display: block;
width: 12.5vw;
max-width: 15vh;
visibility: hidden;
}
div p {
position: absolute;
margin: 0;
padding: 10px;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0 0 5px blue inset;
}