Fill the image with width using Mat

While working on creating cards using Angular Materials, I encountered an issue where the image was not filling up the space as desired. The red area in the image indicates where I want the image to take up space.

https://i.sstatic.net/vcc9U.png

HTML:

 <mat-card (click)="optionPicked()">

                      <img  mat-card-image [src]="backgroundImage">

                      <mat-card-subtitle>
                        <b>{{SubtitleHere}}</b>
                      </mat-card-subtitle>

                      <mat-card-content>

                      </mat-card-content>
 </mat-card>

CSS3:

.mat-card-image {
  width: 100%;
  margin: 0 -16px 16px -16px;
  padding: 0%;
}
htmlcssangularangular-material

Answer №1

 .box {
    width: 300px;
    height: auto;
    background: blue;
    margin: 10px auto;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

#photo-container {
    background: #EEE;
}

.box-row {
    background: blue;
    width: 100%;
    height: 120px;
}

.image {
    height: 90%;
    width: 90%;
}
<div class="box">
  <div class="box-row" id="photo-container">
    <img src="https://example.com/image.jpg" class="image">
  </div>
  <div class="box-row">
    <p>Different Text Here</p>
  </div>
  <div class="box-row">
    <p>Different Text Here</p>
  </div>
  <div class="box-row">
    <p>Different Text Here</p>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Responsive div that reacts to scrolling

I am looking for a div that can dynamically change its position as I scroll up or down the page. For example, it could start 30px from the top but then move to 100px as I scroll down further. This div will be located on the right-hand side of my page, clo ...

javascriptjqueryhtmlcss

Infinite scrolling pagination feature in ag-grid not functioning properly with Angular

Upon the initial component load, all data appears as expected. However, when switching to the next page, the grid clears and an error is shown in the console: ERROR Error: ag-Grid: unable to draw rows while already drawing rows. It seems that a grid API ...

angularag-grid

The function of jQuery .click() not triggering on elements within msDropDown

I'm having difficulty implementing jQuery on an Adobe Business Catalyst site. The HTML snippet below shows the structure: <div class="banner-main"> <div class="banner-top"> <section class="banner"> <div class="catProd ...

javascriptjqueryhtmlbusiness-catalystmsdropdown

What is the significance of "HandleValidSubmit()" consistently being executed in Blazor?

After reviewing my code, I noticed that the button functionality is not behaving as expected. Specifically, regardless of whether I click the Delete or Submit button, it always triggers HandleValidSubmit() and executes UpdateQuizAsync. This causes an issue ...

htmlblazorwebassembly

Unable to change the font-size in Bootstrap 5 is not possible

I've been exploring Bootstrap 5 and encountered an issue while trying to change the font-size of the navbar-brand element. Despite my efforts, the font-size remained unchanged. Additionally, attempts to add padding to the navbar-brand did not result i ...

htmlcssbootstrap-5

Hiding or removing DOM elements with ng-bootstrap pagination

I am in the process of incorporating pagination into my project using ng-bootstrap pagination. In my HTML, I am combining an ngFor loop with the slice pipe to filter elements for display. <tr *ngFor="let bankAccount of bankingAccounts | slice: (p ...

javascriptangularbootstrap-4ng-bootstrap

Text Box: Add a touch of flair with resizing

One interesting feature on my webpage is a textarea that can be resized using resize:both; I am looking for a way to apply a specific style to this textarea only when the user resizes it. While I would prefer to achieve this with CSS alone, it seems like ...

jqueryhtmlcss

Tips for utilizing state and city dropdown menus in JavaScript multiple times without interfering with other dropdowns

Currently, I am utilizing CodeIgniter to create a dynamic dropdown functionality. The setup involves four select country dropdowns where the state options will populate based on the selected country, and once a state is chosen, the corresponding city optio ...

javascriptjqueryhtmljsonajax

How to access a PHP include using data retrieved from a MySQL database?

I am currently in the process of developing a website that will be powered by a MySQL database. To simplify the structure of the URLs, I have decided to rewrite them to point to a single file. The file's layout is as follows: <html> <head&g ...

phpmysqlhtml

Obtain user input and showcase it on the screen using a combination of Ajax and PHP

Whenever a user inputs a value in the textbox, it should dynamically display on the screen. I have successfully implemented this feature once, but I am encountering difficulties with implementing it for a second input. Your help is greatly appreciated. fu ...

javascriptjqueryhtmlajaxcodeigniter

Retrieve webpage using HTML stored in web storage

I am exploring a new idea for an application that utilizes local storage, and I am seeking guidance on the most effective way to load content after it has been stored. The basic concept of the app involves pre-fetching content, storing it locally, and the ...

javascriptjqueryajaxhtmllocal-storage

Display the number of objects in an array using Angular and render it on HTML

I am having trouble displaying the length of an array on my HTML page. No errors are showing up in the console either. Can someone help me figure out how to get the total number of heroes? HTML: <div *ngFor="let hero of heros"> <div>The tota ...

angulartypescript

The information is not being stored in Excel despite the fact that the Excel document has been generated with a header

I have been working on a project that involves fetching book details from the Google Books API and using generative AI to create descriptions for them. I have successfully created an Excel file, but I am facing an issue with saving data inside it. It' ...

htmlcssflaskgoogle-books-apidata-handling

What is the best way to receive a notification once the final observable has completed emitting its values?

In the past, we only made one call to the API reqFinanceDataWithFilters(req): Observable<any> { return this.http.post(env.baseUrl + req.url, req.filters) .pipe(map(this.extractResults)); } However, the response from this single request was a ...

angularrxjs

Use JavaScript to limit Google Analytics and Yandex.Metrica to track only the referral sources and screen sizes

I prefer not to include external JavaScript on my website for unnecessary tracking purposes. However, I do need to gather referrer and screen size information, which cannot be achieved with a regular HTML img tag alone. What is the most standard-complian ...

javascripthtmlcssgoogle-analyticsyandex-api

Ways to retrieve only the chosen option when the dropdown menu features identical names

How can I retrieve only the selected value from the user, when there are multiple select options with the same class name due to dynamic data coming from a database? The goal is to submit the data using Ajax and have the user select one option at a time. ...

javascriptjqueryhtml

Building Individual Elements in Angular 2

My task involves creating two distinct components in Angular 2, the Users component and the Clients component. These components are not nested and do not have any relationship. To call these components separately, I typically use main.ts as the main entry ...

javascriptangularjsangular

What's the deal with inline blocks and text in the middle?

Check out this code I created for a navigation bar. HTML : <div class="header-nav"> <div class="header"> <img src="../Pictures/LifeFrame/2.jpg" width="100%" height="100px" /> </div> <div class="nav" align="c ...

htmlcss

JavaScript: Can you clarify the value of this variable using five sets of double quotations?

Could you please review the code snippet below for me? <script type="text/javascript"> function recentpostslist(json) { document.write('<ul class="recommended">'); var i; var j; for (i = 0; i < json.feed.entry.length; i++) { ...

javascripthtmljsonbloggeraddition

Creating a form with required fields in Angular and using the ngIf directive

Update: modified the sample code to incorporate TypeScript for better clarity I have a form with various buttons for users to choose from. The submit button is initially disabled until a user selects a button. However, there's a unique requirement wh ...

javascripthtmlangulartypescriptforms