Keep Image Size the same even after zooming in and out
I would suggest you to work with the CSS Units: vw and vh.
vw=1 is relative to 1% of the width of the viewport, while vw=100 is 100%.
vh=1 is relative to 1% of the height of the viewport, while vh=100 is 100%.
The size will always adjust to the size of what you see. Therefore, even when you zoom in or zoom out, the viewport will stay the same and therefore, the sizes of your components won't change then.
You can test it out on these examples:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vh
Align mat-cards content (image, text and buttons)
Since I answered your previous SO question, I'll build my answer to this question upon my previous answer. Please refer to this updated Stackblitz with images of different width and height.
EDIT: Adjusted the answer/stackblitz to make a row containing 5 elements.
Explanation
In order to keep the image always the same height I've added the class "image" to the <img>
-tag (you can of course apply the css to the img
-tag directly with .product img{...}
as well).
<img class="image" mat-card-image src="{{product.picture.url}}" alt="photo">
and applied the following CSS:
.image{
height: 150px; /* adjust as needed */
object-fit: contain;
}
With object-fit: contain
your image will always properly scaled and fully visible within the available area.
Keep in mind that object-fit
is currently only fully supported by the following browsers.
EDIT:
In order to get 5 Elements within each row you have to adjust the fxLayoutGap
and the calculation of the width for each element using the fxFlex
attribute. Please change your code as follows..
<div class="container" fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutGap="20px">
<!-- Add addProduct-button outside loop -->
<mat-card fxFlex="0 1 calc(20% - 20px)" (click)="addProduct()" class="product">
...
</mat-card>
<!-- loop over the products -->
<mat-card fxFlex="0 1 calc(20% - 20px)" *ngFor="let product of products; let i = index" class="product">
...
</mat-card>
</div>
.. and change the 20px set on the fxLayoutGap
and the within the calculation of fxFlex
to your desired value.
With those values now set you have to apply a min-width value, otherwise all elements will just get smaller in width and the row won't wrap:
.product{
min-width: 180px; /* adjust as desired */
min-height: 250px;
margin-bottom: 20px; /* same as fxLayoutGap for even distribution */
}
EDIT 2
To make the first element the same height as the others you have to adjust to (min-)height
of the .product CSS-class to be equal to the height of the highest product.
EDIT 3 (to answer edit 2 of the question)
Since you didn't mark your question answered yet, I've modified the code you provided in your edit #2 to accomplish your desired design: stackblitz
I've changed the following:
- changed the
fxLayoutAlign
on the container to"space-evenly stretch"
instead offxLayoutAlign="start start"
this distributes all items in a row on the x-axis evenly and makes them stretch as high as the highest element of the row. - removed all
fxFlexFill
- added
fxFlex
to the mat-card-content - removed the height from the .product CSS-class
Regarding the border on the left side.. I assume your container is too close to the browser windows left side. I've change the container css in my stackblitz as well.
Correct mat-card-avatar image height in mat-ccard-header
There are two options to get what you're looking for:
- Option 1: use a
div
withmat-card-avatar
and set the background
from you TS array - Option 2: use an
img
withmat-card-avatar
ad set
the source
You were putting <img>
inside the div
with mat-card-avatar
...
relevant HTML:
<h2>Option 1</h2>
<div *ngFor="let centre of centres">
<mat-card class="centres-card">
<mat-card-header fxLayout fxLayoutAlign="start center">
<div mat-card-avatar class="example-header-image"
[ngStyle]="{'background-image': 'url(' + centre.img + ')'}">
</div>
<mat-card-title>{{centre.name}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>
{{centre.streetAddress}}
<br>
{{centre.city}}, {{centre.province}}
<br>
{{centre.postalCode}}
</p>
</mat-card-content>
</mat-card>
</div>
<h2>Option 2</h2>
<div *ngFor="let centre of centres">
<mat-card class="centres-card">
<mat-card-header fxLayout fxLayoutAlign="start center">
<img mat-card-avatar src="{{centre.img}}">
<mat-card-title>{{centre.name}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>
{{centre.streetAddress}}
<br>
{{centre.city}}, {{centre.province}}
<br>
{{centre.postalCode}}
</p>
</mat-card-content>
</mat-card>
</div>
relevant CSS:
.example-header-image {
background-size: cover;
}
working stackblitz here
Image Binding in ngfor for Angular Material
To display image you need to use img tag and pass image path to its src, like below:
<mat-card-title>
{{card.title}}
<img [src]="card.imgUrl"/>
</mat-card-title>
Related Topics
CSS Attribute Selector + Descendant Gives a Bug in Webkit
How to Wrap Long Words on Newline, and Avoid Horizontal Scroll Using CSS
Is It Ok to Use Cellpadding="2" Cellspacing="2" in <Table>
Give a CSS Styled Div a "Border-Left-Image"
CSS Background Shorthand Property Not Working with Background-Size
Assigning Visible Property of the Button to a Static Method Result
CSS - How to Select Multiple Different Child Elements Within a Parent Without Repeating the Parent
Angular 2 Special Selectors with SASS
Can You Create Space Between Background Image Repeats
How to Load CSS File Dynamically
Why Does This Div Shift Down When Content Is Added
I Need to Remove the Horizontal Scrollbar on an Overflown <Div>
Remove Padding from Unordered List
Whitespace Preservation in Less Escaping for Calc Operands in CSS3