如何在mat-card-image中制作边缘?

问题描述 投票:1回答:5

我是网络开发的新手,在下面的代码中,我想在各方面为我的图像制作边距,但它不起作用我做的mi-stack可以帮助我一些人

CSS

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

HTML

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

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

html css angular angular-material angular7
5个回答
1
投票

试试这个:

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

1
投票

width: 100%添加到img以水平限制它,然后您可以使用自动边距集中它:

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

updated stackblitz

但我建议使用box-sizing: border-box,然后使用padding应用空间 - 因为mat-card-image已经设置了+ 100%宽度并为布局设置负边距。

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

updated stackblitz


0
投票
.main-image {
    margin: 10px;
    width: 100%;
}

在.main-image类中添加宽度,这样你的图像就会在所有边缘的卡片中

并在示例类中添加了box-sizing

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

0
投票

试试这个:

<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
投票

保证金完全正常。您已将.mat-card-image的宽度设置为超过100%,这会溢出父容器。

目前是这样的:

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

它超过了容器的100%宽度,所以它应该超出父容器。此外,如果您使用flex属性,我建议您这样做以使其正确对齐: -

.example-card{
  display: flex;
  flex-flow: column;
  align-items: center;
}
.mat-card-image{
  width: 100%;
}
© www.soinside.com 2019 - 2024. All rights reserved.