mohiit1502/PictureStory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Alignment fixes in image component

Browse Source
This commit is contained in:
Mohit Nagar
2019-01-04 18:01:29 +05:30
parent a05ae4beef
commit f4159a9090
2 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/content/image-container/image/image.component.html
View File

@@ -17,7 +17,7 @@
<mat-card class="card">
<mat-card-header>
<div mat-card-avatar class="header-image"></div>
<div mat-card-avatar [ngStyle]="{background: 'url(' + image.imageUrl + ')'}" class="header-image"></div>
<mat-card-title>{{image.imageTitle}}</mat-card-title>
<mat-card-subtitle>Nature</mat-card-subtitle>
</mat-card-header>

23
src/app/content/image-container/image/image.component.scss
View File

@@ -10,24 +10,25 @@
// }
.card {
width: 20rem;
// width: 20rem;
width: 100%;
margin: 20px auto;
overflow: auto
}
.image-card {
max-width: 400px;
}
// .image-card {
// max-width: 400px;
// }
.image {
background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
background-size: cover;
max-width: 400px;
}
// .image {
// background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
// background-size: cover;
// max-width: 400px;
// }
.header-image {
background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
background-size: cover;
// background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
background-size: contain;
}
mat-divider {