html - 画像が大きすぎる場合に表の幅を設定する

Question

テーブルの幅を画面の 80% にしたい。

テーブルには 1 行と 4 列があります。各セルには 1 つの画像が含まれます。

問題は、写真が大きすぎることです-写真の幅がテーブルの幅によって均等に決定されるようにしたいです（各セルは画面の20％になります）

そして、各画像の高さはその幅によって決定されます..

どうやってやるの？

Answer 1

これにより、シンプルで洗練された、完全にレスポンシブなソリューションが提供されます。

HTML:

<table border="1px solid black" width="80%">
    <tbody>
        <tr>
            <td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td>
            <td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td>
            <td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td>
            <td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td>
        </tr>
    </tbody>
</table>

このjsFiddleの例を参照してください

同様に、このCSS ソリューションを参照してください。

td img {
    width: 100%
}​

Answer 2

次のようにします。

table { width:80%; }
td { width:25%; }
td img {
    width:100%;
    height:auto;
}

画像の幅は何かから継承する必要があるため、TD に何らかの幅を設定してください。これはテーブルなのでブラウザは計算できるはずですが、何らかの理由でリスト マークアップなどに変更した場合は、定義された幅が必要になります。