角材料 2 md-card 宽度答案

【问题标题】：Angular material 2 md-card width角材料 2 md-card 宽度
【发布时间】：2017-12-29 19:31:09
【问题描述】：

我的 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，并且我希望卡片完全包裹图像，但相反的情况发生了，卡片填满了页面的整个宽度，因此，图像拉伸到卡片的大小

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

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

【问题讨论】：

如果我正确，你需要为md卡设置宽度，来源material.angular.io/components/card/examples
我太笨了 (－‸ლ) 我尝试设置宽度 md-card 但我使用的是宽度属性。我现在为 md-card 创建了一个 css 类，它可以工作。谢谢！

标签： html css angular angular-material2

【解决方案1】：

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

来源：Here

PS：最好使用box-sizing: border-box;，这样您就可以获得准确的宽度...

【讨论】：