Zitat:
Zitat von JASMS
Ich hoffe, hier im Forum hat jemand eine Idee, wie man Bilder dazu bringt, sich verkleinern zu können, ohne aber größer als ihre Originalgröße zu werden.
|
Bei unterschiedlichen Bildgrößen Dan die Originalgröße in Prozent umrechnen für jedes einzelne Bild.
Beispiel:
A Pen by Captain Anonymous
Ob es eine Tabelle sein sol musst du selber entscheiden.
Eine Tabelle ist für tabellarische Daten gedacht.
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Titel der Webseite</title>
<style type="text/css">
html {
font-size: 100%;
}
body {
margin: 0;
}
table {
/* border-collapse: collapse; */
border: 2px solid #dddddd;
width: auto;
}
table caption {
font-size: 1.5rem;
font-weight: bold;
text-align: center;
}
table tr {
}
table td {
margin: 0;
padding: 2px;
vertical-align: middle;
border: 1px solid #aaa;
}
table td img {
vertical-align: bottom;
min-width: 100px;
height: auto;
}
table tr:nth-child(3) td img { width: 80%; }
table tr:nth-child(5) td img { width: 40%; }
table tr:nth-child(9) td img { width: 100%; }
</style>
</head>
<body>
<table>
<caption>
Ob es eine Tabelle sein sol musst du selber entscheiden. <br>
Eine Tabelle ist für tabellarische Daten gedacht.
</caption>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</td>
<td><img src="http://jasms.de/d_bank/bilder/meme01.jpg" alt=""></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet.</td>
<td><img src="http://jasms.de/d_bank/bilder/melissa02.jpg" alt=""></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet.</td>
<td><img src="http://jasms.de/d_bank/bilder/kyouko06.jpg" alt=""></td>
</tr>
</table>
</body>
</html>
___________________
MfG Roland