Question

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

代码如下:( small类将卡的高度限制为300px）

<div class="card small">
    <div class="card-image">
      <img src="images/sample-1.jpg">
      <span class="card-title">Card Title</span>
    </div>
    <div class="card-content">
      <p>I am a very simple card. I am good at containing small bits of information.
      I am convenient because I require little markup to use effectively.</p>
    </div>
    <div class="card-action">
      <a href="#">This is a link</a>
    </div>
</div>

这就是我想要实现的目标：

图片必须位于其父级的中心
如果图片的宽度小于卡片的宽度，那么它应该与卡片的全宽一起使用
如果它大于卡片宽度，则应裁剪以适合卡片
它应该是响应式的（使用responsive-img类）

Answer 1

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

这可以通过将margin: 0 auto;应用于.card-image并设置小于.card的最大宽度的最大宽度来实现。

如果图像的宽度小于卡片宽度，那么它应该使用卡中的全宽

这是否意味着图像不应大于其原始尺寸？如果是这样，下面的演示应符合标准。 .card-image的最大宽度设置为400px，.responsive-img的宽度设置为350px。

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

这可以通过将overflow: hidden;设置为.card-image来实现。

它应该是响应式的（使用responsive-img类）

下面的演示在图片上使用.responsive-img。要使图像即使被裁剪也要居中，您可以将top，bottom，left，right值设置为-100%和{{1到margin。请务必将auto设置为相对位置，将.card-image设置为绝对值。

这是一个演示：

https://jsfiddle.net/suefeng/updr2ehp/1/

如果调整窗口大小，则应在窗口较窄时裁剪图像。图像为350x300px。

Answer 2

Linked a jsFiddle以及示例。希望这会有所帮助。

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

当您指定小卡时，高度将受到限制。要修改宽度，只需指定要使用的列数。

<div class="col s6">

如果图片的宽度小于卡片的宽度，那么它应该与卡片中的全宽一起使用

一些太小的图片会被扭曲，请参阅jsFiddle中带有jpg的第三个示例。

它应该是响应式的（使用responsive-img类）

Materialise中的响应功能应该为您提供一些功能，例如在第二张卡片中。

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

仅当图像不适合div时才显示其最大宽度

2 个答案: