zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 Bilder in die Gleiche IMG HTML einbauen wegen Responsive Design.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.12.2013, 08:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.07.2013
Ort: Switzerland
Beiträge: 27
hakura befindet sich auf einem aufstrebenden Ast
Standard 3 Bilder in die Gleiche IMG HTML einbauen wegen Responsive Design.

Hallo Community,

Ich habe ein Problem, und zwar habe ich in HTML ein Bild per <img> eingebunden. Nun soll sich das Bild bei einer gewissen Width Grösse durch ein kleineres ersetzen wegen den Performance gründen.
Ich weiss nicht wie ich das Bild mit den media querys wechseln kann wenn ich es im HTML drin habe?

Kann mir jemand ein Beispiel zeigen oder muss ich das immer im CSS mit Background regeln?

Danke.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.12.2013, 10:32
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von hakura Beitrag anzeigen
Ich habe ein Problem, und zwar habe ich in HTML ein Bild per <img> eingebunden. Nun soll sich das Bild bei einer gewissen Width Grösse durch ein kleineres ersetzen wegen den Performance gründen.
Ich weiss nicht wie ich das Bild mit den media querys wechseln kann wenn ich es im HTML drin habe?

Kann mir jemand ein Beispiel zeigen oder muss ich das immer im CSS mit Background regeln?

Schau mal hier: Thema "Traffic reduzieren"

selfhtml.de - Thread anzeigen

Ich hoffe, die dort geposteten Beispieldateien sind noch vorhanden.

Wenn es nicht das war, was du suchtest, verlinke bitte deine Testdatei. (keine Code-Brocken hier posten)

Geändert von gaby (03.12.2013 um 10:35 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.12.2013, 10:48
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Ergänzung:

Ich lese gerade

Zitat:
Zitat von Manya:

An Hintergrundbilder habe ich auch schon gedacht, aber dann hätte ich kein gleichmäßiges Skalieren der Biulder, sondern "Stufen", wenn ich mit Media Queries die Hintergrundbilder auswechsele.
Das könnte man mit der CSS3-Eigenschaft 'background-size' in den Griff bekommen.
Allerdings verstehen ältere Browser das noch nicht.

Can I use... Support tables for HTML5, CSS3, etc
Mit Zitat antworten
  #4 (permalink)  
Alt 03.12.2013, 11:16
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.917
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Gerade eben im Feedreader gefunden
Responsive Images, Part 1: Using srcset - SitePoint
Mit Zitat antworten
  #5 (permalink)  
Alt 03.12.2013, 11:49
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Das Attribut srcset befindet sich noch im Entwicklungsstadium, bis jetzt hat nur webkit die Implementierung vorgenommen.
Von einer Nutzung ist daher erst mal abzuraten.

Wenn du PHP kannst, kannst du den UA auf das Wort mobile abfragen und dann das Bild auswählen, das ausgeliefert werden soll.

Wenn du kein PHP kannst, lass es. Verwende ein kleineres Bild im HTML und biete per Link den Verweis auf ein Bild mit höherer Auflösung an.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Antwort

Stichwörter
bilder, design, image, responsive

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Per :hover "gezoomte" Bilder liegen im IE6 hinter dem Vorschaubild Euphoria CSS 21 10.12.2008 10:59
Bildergalerie mit Variablen fledermaus Serveradministration und serverseitige Scripte 1 08.04.2008 08:57
hasLayout Problem mit "Ulles" hover Bildergalerie regioprint CSS 7 17.03.2008 10:45
ie. Abstand über horizontaler Navi geht nicht weg. tifi CSS 5 21.11.2006 17:17
Mit Java Bilder in HTML erklären. Wie gehts? P@trick (X)HTML 9 10.08.2006 15:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:13 Uhr.