J'essaie de créer une bannière à l'aide de 3 images comme indiqué dans Ce codePen La vue est tout acceptable si elle est supérieure à 1200px, mais lorsque la taille de l'écran est tombée en panne, elle se chevauche.
p>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container px-md-0 my-5 mx-auto position-relative text-center yourlimit">
<img class="" src="https://i.ibb.co/GWFDsFk/limit-left-border.png" alt="">
<img class="img-fluid" src="https://i.ibb.co/t2388tK/limit-img.png" alt="">
<img class="" src="https://i.ibb.co/XjHJ1dZ/limit-right-border.png" alt="">
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</html>3 Réponses :
Vous pouvez utiliser les requêtes de support pour cibler les deux images de sorte que la taille soit réduite sur des écrans plus petits.
Par exemple: P>
@media screen and (max-width: 600px) {
.yourlimit img:last-child{
width: 50%;
}
.yourlimit img:first-child{
width: 50%;
}
}
Lorsque l'écran devient plus petit dans la largeur, le conteneur rétrécit également. Donc, vos images gauche et droite sont de + -8% du conteneur à brochage. L'option la plus simple consiste à donner au conteneur la largeur de l'image centrale:
Premier, je suggère de faire la principale image centrale ( https: // i. ibb.co/t2388tk/limit-img.png ) ne pas avoir les lignes blanches à l'une des deux extrémités qui recouvrent déjà une partie du texte - qui sera impossible à aligner sur les navigateurs et les tailles d'écran.
Ensuite, j'ai atteint l'effet souhaité en ajustant votre CSS. J'ai supprimé les règles code> inférieur > car cela empêchait les images alignez-vous en haut, ce qui facilite le réglage de l'OMI. J'ai également défini la première image sur à partir de là, vous avez les règles suivantes à ajuster jusqu'à ce que vous obteniez ce que vous voulez être la largeur de chaque image: p> Voici mon nouveau CSS à brancher votre code de code. Notez que je mets des frontières rouges autour des images juste pour avoir un sentiment d'où ils sont - les supprimer évidemment une fois que vous avez terminé. P> à gauche: 0; code> et la dernière image sur Droite: 0 code>. p>
img {
border: solid red 1px;
}
.yourlimit img:first-child{
position: absolute;
left: 0;
width: 20%;
}
.yourlimit .img-fluid {
width: 80%;
}
.yourlimit img:last-child{
position: absolute;
right: 0;
width: 20%;
}
Je viens de remarquer que la bonne image est descendue de l'endroit où elle devrait être placée. Enfait la barre bleue doit être alignée sur l'ombre de l'image centrale.
Pourquoi ne pas ajouter de requêtes multimédias? Semble être la meilleure option.
À quoi ressemble la sortie souhaitée pour toutes les tailles? Depuis que vous avez votre premier / dernier absolu positionné avec des pourcentages, il est supposé que vous savez
IMG-fluide ne s'applique pas car il est omis de ces 2 éléments. Donc, comme le souligné Jleggio, les requêtes des médias sont probablement la meilleure mise par choix à moins que la façon dont elle soit présentée soit modifiée.