如何在垫子卡片图像的各个侧面上留出余量？

Question

我是Web开发的新手，在下面的代码中，我希望在各个方面提高我的形象，但无法正常工作，我所做的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

Answer 1

尝试一下：

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

Answer 2

将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应用 space -因为mat-card-image已经设置了+ 100％的宽度，并且设置了< 布局的em>负边距。

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

请参见updated stackblitz。

Answer 3

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

在.main-image类中添加宽度，这样您的图像将在卡内且具有所有边距

，并在示例类中添加框大小

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

Answer 4

尝试一下：

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

Answer 5

保证金可以正常工作。您已将.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%;
}