Html 仅当图像不'；我穿不合身

我正在使用Materialize框架，我对组件（小版本）感兴趣

代码如下所示：

small

类将卡的高度限制为

300px

）

卡片标题
我是一张非常简单的卡片。我擅长包含少量信息。
我很方便，因为我需要很少的标记来有效地使用

以下是我想要实现的目标：

• 图像必须位于其父图像的中心
• 如果图像的宽度小于卡片的宽度，则应与卡片的全宽一起使用
• 如果它大于卡片宽度，则应将其裁剪以适合卡片
• 它应该是响应性的（使用

  响应性img

  类）

附示例。希望这有帮助

如果它大于卡片宽度，则应将其裁剪以适合卡片

当您将卡片指定为“小”时，高度将受到约束。要修改宽度，只需指定要使用的列数

<div class="col s6">

如果图像的宽度小于卡片的宽度，则应与卡片的全宽一起使用

有些太小的图像会失真，请参见中带有jpg的第三个示例

它应该是响应性的（使用响应性img类）

烘焙到Materialize中的响应特性应该为您提供一些特性，例如在第二张卡中

<img src="any.jpg" alt="" class="circle responsive-img">

图像必须位于其父图像的中心

这可以通过应用

margin:0 auto

到

.card image

并设置一个小于

.card

最大宽度的最大宽度

如果图像的宽度小于卡片的宽度，则 应与卡片中的全宽一起使用

这是否意味着图像不应大于其原始大小？如果是这样，下面的演示应该满足标准

.card image

的最大宽度设置为400px，而

的最大宽度设置为350px

如果大于卡片宽度，则应裁剪以适合
卡片

这可以通过设置
溢出：隐藏来实现至
。卡片图像

它应该是响应性的（使用响应性img类）

下面的演示在图像上使用了
.responsive img
。要使图像在裁剪时居中，您可以将
顶部
，
底部
，
左侧
，
右侧
值设置为
-100%
，将
边距
设置为
自动
。确保将
.card image
设置为相对位置，将
.responsive img
设置为绝对位置

下面是一个演示：


如果调整窗口大小，则当窗口较窄时，图像应裁剪。图像为350x300px。
是否可以将图像添加为
背景图像
而不是使用
img
标记？@Sanderfish否，它必须用作
img
<img src="any.jpg" alt="" class="circle responsive-img">