Mon slider met mon design en vrac !

Bonjour à tous,
J'ai eu la bonne idée de vouloir intégrer dans mon site un petit slider de 3 images animées par un fondu en css (@keyframes/opacity). Tout fonctionne parfaitement bien jusqu'à ce que je me décide à regarder de plus près la partie responsive !
Mon problème est que je ne parviens pas à contenir le slider sur une hauteur fixe sans déformer les images ou écraser les div suivantes quand le site grandit ou à me retrouver avec des marges immenses quand le site rapetisse ! Je pense avoir tout essayé (min et max-height, 100%, px, vh, etc...)
Si vous aviez une idée à me donner ce serait sympa !
J'aimerais reproduire cet effet : http://template-seaside.webflow.io/

<div class="diaporama">
        <img src="images/diapo1.jpg">
        <img src="images/diapo2.jpg">
        <img src="images/diapo3.jpg">
 </div><!--diaporama--->
<div class="incrustation">
        <p class="incrustation1">
                Lorem ipsum dolor sit amet...
        </p>
        <p class="incrustation2">
                ...Lorem ipsum dolor sit amet<a href="https://www.google.fr/">Lorem</a>
        </p>
</div>

(Je vous fais grâce de la partie animation qui n'est pas en cause, elle ne contient pas de dimensions ou positions)

.diaporama {
    width: 100%;
    height: 150px;
}

.diaporama img {
    position: absolute;
    left: 0;
    right: 0;    
    width: 100%;
}

.incrustation {
    width: 90%;
    margin: 0 auto;
}


.incrustation1 {
    background-color: #2A3033;
    text-align: left;
    font-size: 28px;
    letter-spacing: 0.06em;
    font-family: 'Roboto', serif;
    font-weight: 700;
    color: #FBF6F6;
    margin-bottom: 2px;
    padding-left: 10px;
}

.incrustation2 {
    padding-right: 10px;
    font-size: 24px;
    line-height: 29px;
    text-align: right;
    letter-spacing: 0.06em;
    font-family: 'Roboto', serif;
    font-weight: 700;
    color: #FFFFFF;
    background-color: #E8B11A;
}

.incrustation2 a {
    color: #ffffff;
}

Modifié par etienne69 (04 Oct 2019 - 17:26)

En fait, le problème vient certainement de l'utilisation de la position: absolute; pour fixer les images du slider les unes sur les autres et par conséquent je provoque une rupture du flux html qui fait crasher mon design en cas de redimensionnement de la fenêtre...

Existe t-il une solution pour remédier à ça ? (avant que je m'oriente sur un slider au défilement horizontal ou à utiliser un tout prêt en javascript ?)