HTML: Legen Sie die Tabelle Breite, wenn Bilder zu groß sind

Question

Ich möchte meine Tabelle mit einer Breite von 80% des Bildschirms sein.

Die Tabelle hat eine Zeile und 4 Spalten. jede Zelle enthält ein Bild.

Das Problem ist, dass die Bilder zu groß sind - Ich mag, dass thier Breite durch die Tabellenbreite gleichmäßig bestimmt wird

und so, dass jede Bildhöhe (jede Zelle wird 20% des Bildschirms erhalten) wird durch seine Breite bestimmt.

Wie kann ich das tun?

Danke!

Answer 1

etwas tun:

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

Die Breite auf das Bild von etwas werden muss inheritted, so stellen Sie sicher, dass Sie auf dem TD eine Art Breite setzen. Der Browser sollte es berechnen können, da es eine Tabelle ist, aber wenn Sie aus irgendeinem Grund zu einem Listenmarkup oder etwas anderem wechseln, benötigen Sie eine definierte Breite.

Answer 2

Dies bietet eine einfache, elegante und voll ansprechbar Lösung:

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> 

Sehen Sie diese jsFiddle example

Ähnlich sehen dies CSS solution mit

td img { 
    width: 100% 
}​