Изображение разрывает макет сетки

Question

Мне нужны два адаптивных столбца, в которых в левом столбце будет изображение, а в правом - текст. Я пробовал сделать это с помощью следующего кода, но он ломается, когда я помещаю изображение в столбец.

.about-name {
  text-align: center;
  margin-bottom: 6rem;
}

.card {
  padding: 1rem;
  height: 4rem;
}

.cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

<div class="cards">
  <div class="card">
    <img src="photo.png" alt="">
  </div>
  <div class="card">
    <p>My Text here</p>
  </div>
</div>

В основном я хочу создать веб-страницу, как на скриншотах ниже:

Скриншот 1

Скриншот 2

Answer 1

Вам необходимо установить ширину и высоту элемента изображения, чтобы он оставался внутри ячейки сетки.

.cards {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card {
  height: 4rem;
  padding: 1rem;
  border: 2px dashed green;
}

img {
  max-width: 100%;
  max-height: 100%;
}

<div class="cards">
  <div class="card">
    <img src="http://i.imgur.com/60PVLis.png" alt="">
  </div>
  <div class="card">
    <p>My Text here</p>
  </div>
</div>

jsFiddle demo