使图像适合表格单元而不经过div

Question

我试图制作一张闪存卡，顶部有图像，底部有文字。我尝试将图像和文本放入1x2表中，顶部单元格上的图像和底部单元格上的文本。我不希望细胞扩展以适应图像。我希望图像适合细胞。目前，图像正在覆盖卡片并将文本方式向下推到卡片下方。这就是我到目前为止所拥有的：

＆＃13;

＆＃13;

body {
  background: #F17563;
  font-family: Open Sans;
  font-size: 50px;
  color: #222;
}
label {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display: block;
  width: 300px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.card {
  position: relative;
  height: 100%;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 600ms;
  transition: all 600ms;
  z-index: 20;
}
.card div {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #FFF;
  text-align: center;
  line-height: 200px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 2px;
}
.card .back {
  background: #222;
  color: #FFF;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
label:hover .card {
  -webkit-transform: rotateX(20deg);
  transform: rotateX(20deg);
  box-shadow: 0 20px 20px rgba(50, 50, 50, .2);
}
input {
  display: none;
}
 :checked + .card {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
}
label:hover :checked + .card {
  transform: rotateX(160deg);
  -webkit-transform: rotateX(160deg);
  box-shadow: 0 20px 20px rgba(255, 255, 255, .2);
}

＆＃13;

<label>
  <input type="checkbox" />
  <div class="card">
    <div class="front">
      <table>
        <tr>
          <td>
            <img src="http://static.igre123.com/slike/28899-68381/turtle-attack!!!-*-*.jpg" alt="hi" />
          </td>
        </tr>
        <tr>
          <td>
            Front
          </td>
        </tr>
      </table>
    </div>
    <div class="back">Back</div>
  </div>
</label>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的标记有点难以阅读，但据我所知，您不需要表格。

你应该有一个div，其格式设置为你想要卡的大小，并设置背景图像。

CSS

.card-background {
  background-image: url("http://static.igre123.com/slike/28899-68381/turtle-attack!!!-*-*.jpg");
  background-size: cover;

  //size of card
  width: 300px;
  height: 300px;
}

Answer 2

最简单的解决方案是将表格单元格设置为绝对宽度，然后将其中的图像设置为100％宽度。见下面的例子。这是我改变的代码：

<td style="width:300px;">
    <img src="http://static.igre123.com/slike/28899-68381/turtle-attack!!!-*-*.jpg" alt="hi" style="width:100%;" />
</td>

body {
  background: #F17563;
  font-family: Open Sans;
  font-size: 50px;
  color: #222;
}
label {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display: block;
  width: 300px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.card {
  position: relative;
  height: 100%;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 600ms;
  transition: all 600ms;
  z-index: 20;
}
.card div {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #FFF;
  text-align: center;
  line-height: 200px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 2px;
}
.card .back {
  background: #222;
  color: #FFF;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
label:hover .card {
  -webkit-transform: rotateX(20deg);
  transform: rotateX(20deg);
  box-shadow: 0 20px 20px rgba(50, 50, 50, .2);
}
input {
  display: none;
}
 :checked + .card {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
}
label:hover :checked + .card {
  transform: rotateX(160deg);
  -webkit-transform: rotateX(160deg);
  box-shadow: 0 20px 20px rgba(255, 255, 255, .2);
}

<label>
  <input type="checkbox" />
  <div class="card">
    <div class="front">
      <table>
        <tr>
          <td style="width:300px;">
            <img src="http://static.igre123.com/slike/28899-68381/turtle-attack!!!-*-*.jpg" alt="hi" style="width:100%;" />
          </td>
        </tr>
        <tr>
          <td>
            Front
          </td>
        </tr>
      </table>
    </div>
    <div class="back">Back</div>
  </div>
</label>