图像中断网格布局

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>

主要，我想建立一个网页，如下图所示：

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