Материализованные карты получают ширину от столбцов, в которых они находятся. Если вы знакомы с системой grid , то это довольно легко понять:
col s12 = 100% содержащий элемент (полная ширина)
col s6 = 50%
col s4 = 33%
и т. д.
Если вы используете ту же разметку из документов, как я делал в этом коде , ваши карты будут иметь требуемую ширину, без необходимости устанавливать дополнительные элементы управления для изображений внутри.
<div class="row">
<div class="col s12 m7">
<div class="card">
<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>
</div>
</div>
Этот код взято из документации .
Если у вас возникли проблемы, скорее всего, из-за случайной разметки.
РЕДАКТИРОВАТЬ:
Поэтому я создал кодовую ручку, используя горизонтальный пример из документации. И вы правы - в разметке отсутствует строка-обёртка В любом случае, все системы компоновки на основе сетки используют одинаковую структуру: столбцы располагаются в строках, строки - в контейнерах.
Я бы сказал, что горизонтальная карта не так гибка и гибка, как стандартная карта. При более узких размерах пейзажное изображение может иметь пустое пространство снизу, а при очень широких размерах портретное изображение сделает карту слишком высокой, чтобы быть практичной. Поэтому для правильного отображения ваших изображений требуется немного здравого смысла.
Горизонтальная кодовая ручка