J'ai des images dans la div de la carte d'amorçage qui sont à l'intérieur de la div col
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8 B">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-4 col-lg-4 row">
<div class="col-md-6 col-lg-6 B">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-6 col-lg-6 B">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-12">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/3" alt="Responsive image">
</div>
</div>
</div>
</div>
</div>
Je voudrais avoir une image sur tout l'espace col div. Comment pourrais-je y parvenir ?
Comment pourrais-je étendre l'image afin de combler le vide que je représente par une ligne noire
Comme vous le décrivez, vous voulez juste consommer tout l'espace à l'intérieur de la div col (espace vide gauche et droit).
Ce que vous devez faire est de réduire le remplissage par défaut des colonnes d'amorçage de padding-left: 15px; padding-right: 15px
à 0px
. Et cela fonctionnera pour vous.
Parfois, vos styles sont surchargés par les styles bootstrap. Donc, dans ce cas, vous devez utiliser le mot-clé !important
avec votre propriété CSS pour surcharger tous les autres styles CSS définis pour cette propriété particulière.
.zero-padding {
padding: 0px !important;
}
Et pour forcer l'image à utiliser tout l'espace à l'intérieur de la div col, vous devez utiliser le CSS suivant.
.fill-space {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.fill-space img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
Afin de forcer les images du côté droit à prendre les 50% de hauteur aux 2 images ci-dessus et 50% de hauteur à l'image ci-dessous ; vous devez utiliser le CSS suivant.
.half-height{
height: 50%;
}
.zero-padding {
padding: 0px !important;
}
.fill-space {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.fill-space img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
.half-height{
height: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8 B">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-4 col-lg-4 row zero-padding">
<div class="col-md-6 col-lg-6 B zero-padding half-height">
<div class="card card-inverse fill-space" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-6 col-lg-6 B zero-padding half-height">
<div class="card card-inverse fill-space" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-12 zero-padding half-height">
<div class="card card-inverse fill-space" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/3" alt="Responsive image">
</div>
</div>
</div>
</div>
</div>
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots