divを過ぎることなくテーブルのセルに画像をフィットさせる

Question

私は上部に画像を、下部にテキストを持つフラッシュカードを作ろうとしています。私は画像とテキストを1x2のテーブルに入れてみました。上のセルの画像と一番下のセルのテキストです。私は画像に合わせて細胞を拡大したくありません。画像をセルに合わせたい。現在、画像はカードを隠しており、テキストをカードの下に押し込んでいます。

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> 
 
      <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>

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>