Как сделать поля со всех сторон в mat-card-image?

Question

Я новичок в веб-разработке, и в приведенном ниже коде я хочу сделать маржу для своего изображения со всех сторон, но она не работает. То, что сделал 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

поле отлично работает просто отлично.Вы задали ширину .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%;
}

Answer 2

попробуйте это:

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

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

добавьте ширину в класс .main-image таким образом, чтобы ваше изображение находилось внутри карты с полями со всех сторон

, а также добавляет размер окна в примере класса

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

Answer 4

Добавьте 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.

Answer 5

попробуйте это:

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