Css 如何向materialize中的表单元格添加响应图像？

这以一个小圆圈显示我的图像：

现在，我想在表格单元格（

td

）中添加相同的图像，并将其显示在相同大小的圆圈中

我是否应该按照

td

中的内容复制/粘贴上述代码？这似乎太冗长了。有没有更简单的方法

---

注意：我知道一个解决方案可能是编写一些自定义css，但我使用css框架的原因是不编写css，特别是对于像这样的常见内容。

您可以直接将类添加到表元素中，如：

以下是一个例子：

名称
项目名称
项目价格
埃克莱尔
$0.87
艾伦
水母
$3.76
乔纳森
棒棒糖
$7.00

无需将网格系统与表格混合使用。这就足够了：

<img height="30" width="30" class="circle" src="https://picsum.photos/50" alt="My Circular Image">

responsiveimg

类添加了以下CSS：

.circle {
   border-radius: 50%;
}

img.responsive-img {
    max-width: 100%;
    height: auto;
}

这是为了防止图像从容器中溢出，在这里对您没有帮助。您需要做的是使用方形图像并控制图像的内联高度，如上图所示

---

.

您可以使用按钮圈，设置带有标签的图像

响应式img

，例如：

形象
项目名称
项目价格
水母
$3.76
乔纳森
棒棒糖
$7.00
棒棒糖
$7.00

感谢您的反馈。事实上，正如我所问的那样，这是有效的，而且不那么冗长。我想知道，为什么我在任何地方都找不到这个示例（在

tr

，

td

上添加

row

，

col

类）。是否有其他一些通常首选的常见做法（如编写css或在单元格内添加

行

，

列

div，如我的问题所述）？MarinosAn你完全正确，这不是最佳做法，因为

tr

和

td

不能真正与

.row

和

.col

类关联。但是，它不会影响表的原始行为，因此使用它根本不是问题。但我鼓励在手机上添加一个自定义类

.avatar

，以便为其他目的轻松定制手机。请参阅。在您的示例中，第一列需要远离第二列，以便图像具有可见大小。如果第一列接近第二列，您几乎看不到图像。@MarinosAn在本例中，我建议您添加一个额外的自定义类，该类具有

minwidth

属性，如@MarinosAn，对此有任何疑问吗？你需要另一个例子吗？