テーブルにPNG画像を配置する

Question

こんにちは、これは簡単な質問です。しかし私はそれをすることができません。私はテーブルに画像を配置したい。すべてが新しいhtmlファイルで正常に動作しています。しかし、プロジェクトファイルにテーブルを挿入しようとすると、画像が重複してしまいます。これらはテーブルに収まりません。私は何をしているのですか？親切に添付されている画像を見てください。

table,td,th {border: 3px solid black;padding: 15px}

<table> 
 
     <tr><th>Choose from the icons</th></tr> 
 
     <tr><td ><img src='http://www.freeiconspng.com/uploads/smiley-icon-1.png' width='20%'/></td></tr> 
 
     <tr><td ><img src='http://www.freeiconspng.com/uploads/smiley-icon-1.png'width=20%/></td></tr> 
 

 
    </table>

Answer 1

試してみてください。

table, 
 
td, 
 
th { 
 
    border: 3px solid black; 
 
    padding: 15px 
 
} 
 
img.icon { 
 
    width: 20%; 
 
    height: auto; 
 
}

<table> 
 
    <tr> 
 
    <th>Choose from the icons</th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <img src='heart1.png' class="icon" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <img src='heart1.png' class="icon" /> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

まず、あなたは常に高さと幅の両方を指定する必要があります。

第2に、幅をピクセルで指定する必要があります。 AFAIK、画像タグはパーセンテージをサポートしていません。

IMG tag

第三に、あなたの第二の画像は、幅の値の前後に引用符を持っていません。

幅と高さを定義しないで作業するには、画像のサイズを変更するのが理想的です。

画像をセルの背景画像として設定するのが最善の方法です。

Answer 3

このかもしれない作品。あなたが何か質問をしているなら、あなたはコメントして、さらに尋ねることができます。 このソリューションは<td>

table, 
 
td, 
 
th { 
 
    border: 3px solid black; 
 
    padding: 15px 
 
} 
 
td img { 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<table> 
 
    <tr> 
 
    <th>Choose from the icons</th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <img src='heart1.png' class="icon" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <img src='heart1.png' class="icon" /> 
 
    </td> 
 
    </tr> 
 
</table>