1
votes

Comment faire une marge de tous les côtés dans mat-card-image?

Je suis nouveau pour le développement Web et dans le code ci-dessous, je veux faire une marge à mon image de tous les côtés, mais cela ne fonctionne pas. Quelle erreur ai-je commise?

css

<mat-card class="example-card">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>Shiba Inu</mat-card-title>
    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image class="main-image" src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <p>
      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
      bred for hunting.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

html

.example-card {
  max-width: 400px;
}

.main-image{
  margin:10px;
}

.example-header-image {
  background-image: url('https://material.angular.io/assets/img/examples/shiba2.jpg');
  background-size: cover;
}

https://stackblitz.com/edit/angular-q1ce7h?file=app%2Fcard-fancy -example.html

angular html css angular-material angular7

0 commentaires

5 Réponses :

1
votes

essayez ceci:

.main-image{
  margin:10px;
  width: calc(100% - 20px);
}

2 commentaires

comment pouvons-nous appliquer également les marges du haut et du bas

Lien de référence Vous pouvez également utiliser la propriété abrégée: p {margin: 25px 50px 75px 100px; } • la marge supérieure est de 25px • la marge de droite est de 50px • la marge du bas est de 75px • la marge de gauche est de 100px p {marge: 25px 50px; } • les marges du haut et du bas sont de 25 px • les marges de droite et de gauche sont de 50 px

0
votes

.example-card {
    max-width: 400px;
    box-sizing: border-box;
}

0 commentaires

1
votes

Ajoutez width: 100% à l ' img pour le restreindre horizontalement et vous pouvez ensuite centraliser en utilisant marges automatiques:

.main-image{
  padding: 0 10px;
  box-sizing: border-box;
}

Voir stackblitz mis à jour .

Mais je suggérerais d'utiliser box-sizing: border-box puis d'appliquer le espace en utilisant padding - comme mat-card-image a déjà une largeur de + 100% définie et la définition de marges négatives pour le layout-ing.

.main-image{
    margin: 10px auto; /* 10px top & bottom, auto for left and right */
    width: 100%;
}

Voir stackblitz mis à jour .

0 commentaires

0
votes

essayez ceci:

<div class="image">
<img mat-card-image class="main-image" src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
</div>

.image {
  margin:20px;
}
.mat-card-image {
  margin:auto;
}

0 commentaires

0
votes

La marge fonctionne parfaitement. Vous avez donné plus de 100% de largeur à .mat-card-image qui déborde du conteneur parent.

Actuellement, c'est ceci:

.example-card{
  display: flex;
  flex-flow: column;
  align-items: center;
}
.mat-card-image{
  width: 100%;
}

Il fait plus de 100% de largeur de le conteneur donc il est censé aller au-delà du conteneur parent. De plus, si vous utilisez la propriété flex, je vous suggère de le faire pour l'aligner correctement: -

.mat-card-image{
  width: calc(100% + 32px);
}

0 commentaires