html - Angular Material 2 md-卡宽度

标签 html css angular angular-material2

我的 md-card 组件有问题

        <md-card>
            <img height="200" width="200" md-card-image src="/resources/{{odd?.image?.path}}" />
            <md-card-content>
                <button md-button>{{odd?.object?.name}}</button>
            </md-card-content>
        </md-card>

我有这段代码,它创建了一张卡片,里面有一张图片,图片下面有一些文字。 我希望图像的大小为 200x200,并且我希望卡片将图像完全包裹起来,但恰恰相反,卡片填满了页面的整个宽度,因此图像会拉伸(stretch)到卡片的大小

enter image description here

如果我从 img 标签中删除 md-card-image 属性,它会以 200x200 显示图像,但 md-card 仍然被拉伸(stretch)。

enter image description here

我怎样才能保持我想要的图像大小并使 md-card 环绕它?

最佳答案

您需要使用 css 来调整您的 md-card

来源:Here

PS: its better to use box-sizing: border-box; so you can get the exact width...

关于html - Angular Material 2 md-卡宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45276757/

相关文章:

css - 在不导入的情况下使用 Bootstrap Less 变量?

encryption - 如何在 Angular 2 中导入非核心 npm 模块,例如(使用加密库)?

angular - 使用 ngif 在 mat-table 中隐藏一行

javascript - 使用行类别动态排序 HTML 表

javascript - 删除数组的部分内容

html - CSS 百分比宽度不起作用

html表格,如何使顶部列刚好适合内容的高度,下面的列占据其余部分

c# - 在 HTML5 CSS 或 C#.NET 中裁剪图像

css - Safari 5 与 Safari 4 : Are there any compatibility differences?

angularjs - Angular 升级指南。 (SystemJS) 意外的 token <