Responsive Web Design - Images - Versionsgeschichte

149.172.227.142 am 12. September 2016 um 13:47 Uhr

2016-09-12T13:47:57Z

149.172.227.142: /* HTML5 Tag */

2016-09-12T13:40:19Z

HTML5 Tag

149.172.227.142: /* HTML5 Tag */

2016-06-01T09:08:09Z

HTML5 Tag

149.172.227.142: /* Hintergrundbild */

2016-06-01T09:07:39Z

Hintergrundbild

149.172.227.142 am 31. Mai 2016 um 13:02 Uhr

2016-05-31T13:02:30Z

149.172.227.142 am 31. Mai 2016 um 12:45 Uhr

2016-05-31T12:45:47Z

149.172.227.142: Die Seite wurde neu angelegt: „== Breite 100%, Höhe automatisch == img { width: 100%; height: auto; } == Breite 100% aber nicht grö…“

2016-05-31T12:42:39Z

Die Seite wurde neu angelegt: „== Breite 100%, Höhe automatisch == <syntaxhighlight lang="css"> img { width: 100%; height: auto; } </syntaxhighlight> == Breite 100% aber nicht grö…“

Neue Seite

== Breite 100%, Höhe automatisch ==
<syntaxhighlight lang="css">
img {
width: 100%;
height: auto;
}
</syntaxhighlight>
== Breite 100% aber nicht größer als das Bild ==
<syntaxhighlight lang="css">
img {
max-width: 100%;
height: auto;
}
</syntaxhighlight>
== Hintergrundbild ==
=== komplett deckend ohne Verzerrung ===
<syntaxhighlight lang="css">
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
}
</syntaxhighlight>
=== Unterschiedliche Bilder für unterschiedliche Gerätegrößen ===
<syntaxhighlight lang="css">
/* For devices smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
background-size: cover;
}

/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
</syntaxhighlight>

@@ Zeile 3: / Zeile 3: @@
 http://alistapart.com/article/responsive-images-in-practice
-== Bilder im Inhalt oder als Background==
+== Plazierung von responsive Images ==
 Normale Bilder mit dem img Tag konnten bis HTML5 nur per Skript ausgetauscht werden. Für Hintergrundbilder kann man mit Media Queries arbeiten.
-== Breite 100%, Höhe automatisch ==
+=== Breite 100%, Höhe automatisch ===
 <syntaxhighlight lang="css">
 img {
@@ Zeile 13: / Zeile 15: @@
+}
 </syntaxhighlight>
-== Breite 100% aber nicht größer als das Bild ==
+=== Breite 100% aber nicht größer als das Bild ===
 <syntaxhighlight lang="css">
 img {
@@ Zeile 20: / Zeile 22: @@
+}
 </syntaxhighlight>
-== Hintergrundbild ==
+=== Hintergrundbild ===
-=== komplett deckend ohne Verzerrung ===
+==== komplett deckend ohne Verzerrung ====
 <syntaxhighlight lang="css">
 div {
@@ Zeile 31: / Zeile 34: @@
+}
 </syntaxhighlight>
-=== Unterschiedliche Bilder für unterschiedliche Gerätegrößen ===
+==== Bezogen auf Viewport ====
 <syntaxhighlight lang="css">
 /* For devices smaller than 400px: */
@@ Zeile 46: / Zeile 72: @@
      background-image: url('img_flowers.jpg');
+   }
+}
 </syntaxhighlight>
@@ Zeile 78: / Zeile 92: @@
 picture tag
-...
+data attribut

@@ Zeile 62: / Zeile 62: @@
 == HTML5 <picture> Tag ==
 Erlaubt (wie <video> und <audio> ) das Definieren von unterschiedlichen Bildquellen
 <syntaxhighlight lang="html5">

@@ Zeile 63: / Zeile 63: @@
 == HTML5 <picture> Tag ==
 Erlaubt (wie <video> und <audio> ) das Definieren von unterschiedlichen Bildquellen
-<syntaxhighlight lang="html4">
+<syntaxhighlight lang="html5">
 <picture>
    <source srcset="img_smallflower.jpg" media="(max-width: 400px)">

@@ Zeile 1: / Zeile 1: @@
 == Breite 100%, Höhe automatisch ==
 <syntaxhighlight lang="css">
@@ Zeile 17: / Zeile 24: @@
 <syntaxhighlight lang="css">
 div {
-    width: 100%;
+  width: 100%;
-    height: 400px;
+  height: 400px;
-    background-image: url('img_flowers.jpg');
+  background-image: url('img_flowers.jpg');
-    background-size: cover;
+  background-size: cover;
+}
 </syntaxhighlight>
@@ Zeile 29: / Zeile 37: @@
    background-image: url('img_smallflower.jpg');
    background-size: cover;
+}
@@ Zeile 48: / Zeile 57: @@
 </picture>
 </syntaxhighlight>