web-dev-qa-db-fra.com

Image pleine largeur dans le conteneur dans Bootstrap 4

J'utilise Bootstrap 4 et j'ai une mise en page de modèle avec

<div class="navbar">
  ...
</div>
<div class="container">
  {{content}}
</div>

Cela fonctionne dans presque tous les cas. Cependant, parfois, je souhaite qu'une image dans le contenu occupe toute la largeur, mais cela n'est pas possible en raison du .container qui utilise left-padding et right-padding.

Je pourrais résoudre ce problème en ajoutant la classe .container dans chaque vue aux bons endroits plutôt que dans le fichier de présentation de mon modèle, mais cela deviendra assez gênant. Surtout si j'ai un CMS où différents auteurs peuvent écrire des articles, et s'ils veulent une image pleine largeur au milieu de leur article, ils doivent écrire du HTML brut pour ressembler à quelque chose comme:

<div class="container">
  some text
</div>
<div class="full-width-image">
  <img src="" alt="">
</div>
<div class="container">
  more text
</div>
..

Comment pourrais-je résoudre ce problème?

htmlcsstwitter-bootstrapwidthpadding
5
Jamgreen

vous pouvez utiliser vw unités avec une marge négative. Et c'est réactif amical.

.full-width-image {
   width: 100vw;
   position: relative;
   left: 50%;  
   margin-left: -50vw;
}

.full-width-image img {
  width: 100%;
}

Voir mon violon: https://jsfiddle.net/ondrejruzicka/07y0o746/

6
ondrejruzicka

J'ai juste le sentiment que celui-ci pourrait vous aider. Ce que j'ai fait est de rendre l'image en tant qu'arrière-plan du <div> lui-même et de définir la hauteur spécifiée pour que l'image soit visible car il n'y a aucun contenu à l'intérieur.

CSS

.full-width-image {
  height: 300px; // your specified height
  background: url("your-image.jpg") no-repeat center center fixed;
  background-size: cover;
}

De plus, pour ajouter les classes .container à la marge droite et gauche, alignées sur vos autres contenus.

HTML

<div class="container full-width-image"></div>

Voici un exemple démo de celui-ci.

2
Chain Trap

Dans bootstrap 4 , vous pouvez appliquer la classe img-fluid:

<img class="img-fluid w-100" src="path.jpg" />

Ici, la classe w-100 est appliquée pour garantir que les images plus petites s’adaptent à son conteneur.

Pour ceux qui utilisent bootstrap 3 : Il suffit d'appliquer img-responsive au lieu de img-fluid.

2
Bhojendra Rauniyar

La clé est d'utiliser la marge négative. Mais avec Bootstrap, il est plus difficile d'obtenir la marge exacte à chaque fois en raison de plusieurs points d'arrêt et de périphériques différents.

C'est le Javascript que vous pouvez ajouter. En réalité, toutes les images sont encapsulées dans une figure avec la classe "centrée sur l'image" et compare la largeur initiale de l'image (doit être définie en tant qu'attribut HTML) avec la largeur à prendre en raison de contraintes d'écran . Si la largeur initiale de l'image est supérieure aux contraintes de l'écran, l'image à l'intérieur de vos articles sera en plein écran. Sinon, ce sera centré.

$(document).ready(function(){
    $("img").wrap("<figure class='image-centered'></figure>");
    $("figure.image-centered").each(function(){
        if ($(this).children("img").attr("width") > $(this).children("img").width()){
            var containerMargins = $(".container").css("marginRight").replace(/[^-\d\.]/g, '');
            var containerPadding = $(".container").css("paddingRight").replace(/[^-\d\.]/g, '');
            var calc = $(".container").width() + (Number(containerMargins) + Number(containerPadding))*2;
            $(this).css({"maxWidth": `${calc}px`, "margin": `1em -${Number(containerMargins) + Number(containerPadding)}px`});
        }
    });
});

Et CSS:

img {
    height: auto; /* Make sure images are scaled correctly. */
    max-width: 100%; /* Adhere to container width. */
    margin: 0 auto;
    display: block;
}

figure {
    margin: 1em 0; 
}
figure.image-centered {
    margin-left: auto;
    margin-right: auto;
}
0
Ilya Kushlianski

Utilisez la classe container-fluid au lieu de container pour amener l'image d'arrière-plan sur toute la largeur de la réponse.

Exemple html:

    <div class="container-fluid">   
        <div class="row image1">
        </div>
    </div>

Exemple CSS:

.image1{
background-image:url("path_to_image.jpg");
background-size: cover;
background-position: center center; 
background-repeat: no-repeat;
height: 400px;
min-width: 100%;}
0
Martin Loeffler

Si vous connaissez la padding de div.container, vous pouvez définir une margin négative du même montant sur votre classe d'image. 

HTML:

<div class="container">
    <img class="full-width-image" src="whatever.jpg" />
</div>

CSS:

.container {
    padding: 10px;
}

.full-width-image {
    margin: -10px;
}

Sinon, et probablement plus correctement, vous pouvez supprimer la padding de div.container entièrement et l’ajouter aux éléments qui en ont besoin.

0
eoin