如何调整Materialize CSS Horizontal Cards的移动端布局？

当然可以搞定！Materialize的Horizontal Cards默认在移动端确实会保持横向布局，但我们可以通过自定义CSS结合它的响应式工具类来调整，同时解决你遇到的图片裁切问题。下面是一步步的实现方案：

1. 重构卡片基础结构 #

首先给卡片的图片区和文字区加上Materialize的响应式网格类，让我们能在不同屏幕断点控制它们的排列方式：

<div class="card horizontal responsive-card">
  <div class="card-image col s12 m6">
    <img src="your-image-path.jpg" alt="图片描述">
  </div>
  <div class="card-stacked col s12 m6">
    <div class="card-content">
      <p>这里是你的卡片文字内容，比如产品介绍、文章摘要等等</p>
    </div>
    <div class="card-action">
      <a href="#">查看更多</a>
    </div>
  </div>
</div>

这里的col s12 m6表示：在移动端（s断点，最大宽度600px）占满整行，平板及以上屏幕（m断点，最小宽度601px）各占一半宽度。

2. 自定义CSS修复布局与图片裁切问题 #

添加以下CSS代码，覆盖Horizontal Cards默认的移动端样式，同时保证图片正常显示：

/* 针对移动端断点调整卡片布局 */
@media only screen and (max-width: 600px) {
  .responsive-card.horizontal {
    display: flex;
    flex-direction: column; /* 把横向布局切换为纵向堆叠 */
  }
  .responsive-card .card-image {
    max-height: none; /* 取消默认的固定高度限制，避免图片被裁切 */
    width: 100%;
  }
  .responsive-card .card-image img {
    width: 100%;
    height: auto; /* 保持图片原生宽高比，防止拉伸变形 */
    object-fit: cover; /* 可选：如果需要图片填满容器且不变形，可添加这个属性 */
  }
}

简单解释下关键属性：

• flex-direction: column：强制移动端卡片内的元素纵向排列
• height: auto：让图片根据自身比例自适应高度，彻底解决裁切问题

3. 可选：优化移动端堆叠后的间距 #

如果觉得移动端图片和文字的间距太紧凑，可以再加一点样式优化：

@media only screen and (max-width: 600px) {
  .responsive-card .card-stacked {
    padding-top: 1.2rem; /* 给文字区域顶部添加上间距，和图片区区分开 */
  }
}

这样调整后，桌面和平板端会保持图片与文字并排的横向布局，移动端则自动切换为单列堆叠，同时图片也不会出现裁切的情况了。

内容的提问来源于stack exchange，提问作者Freya