我是网络开发的新手,在下面的代码中,我想在各方面为我的图像制作边距,但它不起作用我做的mi-stack可以帮助我一些人
.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;
}
<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
试试这个:
.main-image{
margin:10px;
width: calc(100% - 20px);
}
将width: 100%
添加到img
以水平限制它,然后您可以使用自动边距集中它:
.main-image{
margin: 10px auto; /* 10px top & bottom, auto for left and right */
width: 100%;
}
但我建议使用box-sizing: border-box
,然后使用padding
应用空间 - 因为mat-card-image
已经设置了+ 100%宽度并为布局设置负边距。
.main-image{
padding: 0 10px;
box-sizing: border-box;
}
.main-image {
margin: 10px;
width: 100%;
}
在.main-image类中添加宽度,这样你的图像就会在所有边缘的卡片中
并在示例类中添加了box-sizing
.example-card {
max-width: 400px;
box-sizing: border-box;
}
试试这个:
<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;
}
保证金完全正常。您已将.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%;
}