Comment supprimer l'espace supplémentaire autour de l'image à l'intérieur d'un div

sonia maklouf

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. entrez la description de l'image iciComment pourrais-je y parvenir ?entrez la description de l'image ici

Comment pourrais-je étendre l'image afin de combler le vide que je représente par une ligne noire

Suhaib Janjua

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é !importantavec 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%;
}

PRODUCTION:

entrez la description de l'image ici


Extrait de travail ci-dessous :

.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.

modifier le
0

laisse moi dire quelques mots

0commentaires
connexionAprès avoir participé à la revue

Articles connexes

L'image à l'intérieur de la div a un espace supplémentaire sous l'image

Comment ajouter de l'espace supplémentaire à l'intérieur en bas d'un GridView

comment supprimer de l'espace supplémentaire devant les clés d'un dictionnaire?

Comment supprimer l'espace inférieur supplémentaire dans SliverAppBar

Comment définir exactement le texte sous l'image et supprimer l'espace supplémentaire ?

remplissage égal autour de l'image à l'intérieur d'un conteneur div

Comment se débarrasser de l'espace supplémentaire sous svg dans l'élément div

Supprimer l'espace supplémentaire de FlexLayout

Supprimer l'espace cliquable autour de l'image de lecture à l'intérieur de la bordure rouge

CSS Comment supprimer l'espace supplémentaire créé en réduisant la taille de l'image à l'aide de CSS

Comment supprimer l'espace de ligne supplémentaire sur les puces / listes de démarquage GitHub?

Espace laissé à l'intérieur d'un div lors de l'utilisation d'une image svg

Comment supprimer de l'espace supplémentaire à l'intérieur de la boîte de dialogue de l'interface utilisateur jQuery

conversion de PDF avec la magie de l'image en laissant un espace blanc supplémentaire autour

div a un espace supplémentaire indésirable sur le dessus à l'intérieur du pré

Espace supplémentaire à droite de l'image avec défilement de débordement dans un conteneur

comment aligner bootstrap div l'un à côté de l'autre et si vous avez de l'espace supplémentaire, développez-le

CardView à l'intérieur de NestedScrollView affiche un espace supplémentaire en bas

Comment supprimer le rembourrage supplémentaire autour de l'icône principale AppBar dans Flutter

Comment supprimer l'espace entre les mots à l'intérieur d'un paragraphe en HTML

Comment supprimer l'espace rouge supplémentaire dans Container ?

Comment supprimer l'espace supplémentaire en python ?

Comment supprimer l'espace supplémentaire du côté droit?

Comment définir la position absolue de l'image à l'intérieur d'un div

Comment masquer le haut et le bas d'une image supplémentaire à l'intérieur de son conteneur?

Comment supprimer l'espace supplémentaire après le séparateur dans la barre d'outils de JavaFX ?

Comment supprimer de l'espace supplémentaire dans ImageView pris en mode défilement avec Aspect Fit?

Flutter: Supprimer l'espace supplémentaire de SliverGrid

Supprimer l'espace supplémentaire de ConstraintLayout dans ImageView

TOP liste

  1. 1

    Comment changer le navigateur par défaut en Microsoft Edge pour Jupyter Notebook sous Windows 10 ?

  2. 2

    Enregistrer le chemin de l'image de la galerie vers la base de données de la salle et l'afficher dans la liste des recycleurs

  3. 3

    Microsoft.WebApplication.targets

  4. 4

    knn classification 10 plis de l'outil et du tri

  5. 5

    Quelle est la relation entre le modèle et le tableau ? C'est compliqué

  6. 6

    Créer un système Buzzer à l'aide de python

  7. 7

    Fonction de puissance en Java

  8. 8

    opérations en virgule flottante dans go

  9. 9

    Comment définir la couleur de l'intersection dans un diagramme de Venn?

  10. 10

    Spring @RequestParam DateTime format comme ISO 8601 Date Heure facultative

  11. 11

    comment supprimer "compte de connexion google" à des fins de développement - actions sur google

  12. 12

    AutoMapper.Collection.EFCore - Erreur générée lors de la configuration

  13. 13

    Je continue à obtenir l'objet 'WSGIRequest' n'a pas d'attribut 'Get' sur django

  14. 14

    Comment remplir les valeurs manquantes avec plusieurs colonnes dans R

  15. 15

    Comment puis-je ajouter un UIView sous mon contrôleur de barre d'onglets par programme?

  16. 16

    Yat-il un référentiel maven application Java à démarrer rapidement 11

  17. 17

    Comment rechercher des éléments dans une ArrayList? - Java

  18. 18

    Comment utiliser HttpClient avec TOUT cert ssl, quelle que soit la « mauvaise » est

  19. 19

    Comment créer un bot à compte à rebours dans Discord en utilisant Python

  20. 20

    Sélectionnez le bouton radio sur la saisie de texte

  21. 21

    Placez le modeBar en haut au centre à l'aide de plotly.js

chaudétiquette

Archive