nicht angemeldet
Bilder Layout im Browser (<img> / <a>)
0 0 0 0 0 0
Bilder Layout im Browser (<img> / <a>)
Matthias ApselHallo zusammen,
ich habe eine Frage zur Darstellung von Bildern im Browser. Speziell zum Unterschied zwischen mit dem <img> Tag eingebetteten Bildern und Bildern die mit dem <a> Tag im Browser geöffnet werden.
Nehmen wir an ich habe ein Bild Maße: 1280 x 960 und ich möchte es in meiner Webseite einfügen:
Bei <img src="Bild.jpg"> bekomme ich ein ein ziemlich großes Bild zu sehen (Scrollleisten horizontal & vertikal inklusive) dagegen
bei <a href="Bild.jpg"> bekomme ich eine Seite zu sehen wo genau das selbe Bild perfekt in das Browserfenster passt (keine Scrollleisten).
Die Frage: Wie schaffe ich es, dass ich das selbe Resultat mit dem <img> Tag bekomme?
Ich habe schon ziemlich viel herumprobiert aber bisher leider ergebnislos...
Hoffentlich findet sich jemand der Rat weiß!
Liebe Grüße,
Bernd
-
Hallo Bernd,
Die Frage: Wie schaffe ich es, dass ich das selbe Resultat mit dem <img> Tag bekomme?
Mit diesen Zeilen css sollten es gehen:
img { max-width: 100%; height: auto; }ZB: mit disem Bild von Pierre Auguste Renoir — Le Moulin de la Galette:
<img src="http://upload.wikimedia.org/wikipedia/commons/2/21/Pierre-Auguste_Renoir%2C_Le_Moulin_de_la_Galette.jpg">
2200×1639 Pixel
gruesse qx
-
Mit diesen Zeilen css sollten es gehen:
img {
max-width: 100%;
height: auto;
}Danke, das klappt perfekt! Mir kam zwar noch die Idee <iframe> zu benutzen aber das Resultat ist leider dasselbe wie wenn ich das Bild direkt mit <img> einbinde. Wenn wir uns noch einmal das Ergebnis von <a href="Bild.jpg"> ansehen dann können wir sehen dass nicht nur das Bild perfekt in das Browserfenster passt. Wenn man nun mit dem Mauszeiger über das Bild wandert wird der Mauszeiger zu einer Lupe und bei einem Klick auf das Bild wird es eben vergrößerst oder wieder verkleinert... Aber ich denke dass dieses Ergebnis nur mit einer <a href="Bild.jpg"><img src="Bild.jpg"></a> Konstruktion zu erzielen ist. Liebe Grüße, Bernd-
... Aber ich denke dass dieses Ergebnis nur mit einer <a href="Bild.jpg"><img src="Bild.jpg"></a> Konstruktion zu erzielen ist.
Seit ein paar Browserversionen, so genau weiß ich das nicht, stelt der Browser die Zoom-Cursor bereit. Eine sinnvolle Konstruktion sieht mAn so aus:
<a href="Bild.jpg" target="meinTab"><img src="small_version_Bild.jpg" alt="bild" title="Name und Größe (size || && kB) des verlinkten Bildes"></a>, so werden nicht sofort alle großen Bilder geladen, sondern nur wenn der Benutzer deiner Seite es möchte.gruesse qx
-
Seit ein paar Browserversionen, so genau weiß ich das nicht, stelt der Browser die Zoom-Cursor bereit.
Hab mal nachgeschaut: Die Zoom-in & Zoom-out Cursor werden im Internet Explorer nicht unterstützt. Dennoch zeigt mir der Internet Explorer bei der besagten <a href="Bild.jpg"> Seite einen Zoom-in/out Cursor auf dem Bild..
Wie wird eigentlich diese Zoom-in/out Funktion umgesetzt?
Nachdem ich auf einen solchen Link klicke <a href="Bild.jpg"> komme ich auf ein Browserfenster mit dem Bild als Inhalt. Beim überfahren des Bildes kommt ein Cursor mit einer Lupe.
Wird dieses zoomen nun durch den Browser mit irgendeiner Funktion durchgeführt oder hat mein Irfan View (das Programm mit dem bei mir Bilder geöffnet werden) etwas damit zu tun? (schließlich wird ja das Irfan View Favicon oben in der URL Leiste eingeblendet)
Liebe Grüße,
Bernd-
Hab mal nachgeschaut: Die Zoom-in & Zoom-out Cursor werden im Internet Explorer nicht unterstützt. Dennoch zeigt mir der Internet Explorer bei der besagten <a href="Bild.jpg"> Seite einen Zoom-in/out Cursor auf dem Bild..
Der aktuelle IE (!) verhält sich wie gewünscht, mit Lupe.
Wird dieses zoomen nun durch den Browser mit irgendeiner Funktion durchgeführt oder hat mein Irfan View (das Programm mit dem bei mir Bilder geöffnet werden) etwas damit zu tun? (schließlich wird ja das Irfan View Favicon oben in der URL Leiste eingeblendet)
Ich denke IrfanView ist unschuldig…, das Favicon wird wohl über die mit dem jepg verknüpfte Anwendung gesteuert. Letzlich ist der jeweilige Browser verantwortlich für dieses Feature, zumindest unter aktuellen Windows Browsern.
gruesse qx
-
Der aktuelle IE (!) verhält sich wie gewünscht, mit Lupe.
Also ich benutze den Internet Explorer 11 Version: 11.0.9600.17041
und die Angabe style="cursor: zoom-in;" zeigt keine Wirkung..Ich denke IrfanView ist unschuldig…, das Favicon wird wohl über die mit dem jepg verknüpfte Anwendung gesteuert. Letzlich ist der jeweilige Browser verantwortlich für dieses Feature, zumindest unter aktuellen Windows Browsern.
Habe mal ein wenig rumgegoogelt.. Ein wirklich nervtötendes Thema dessen Lösung wahrscheinlich ziemlich simpel ist aber nirgendswo steht..
Man kann mit Strg + + und Strg + - rein-/rauszoomen. (den Zoomfaktor vergrößern bzw. verkleinern)
Anscheinend wird mit dieser Lupe nicht diese Zoom Funktion ausgelöst - Zoom steht vor und nach dem reinzoomen mit der Lupe bei 100%..
Nun habe ich langsam genug von diesem Thema. So kam mir die Idee einfach mal den cursor: crosshair zu nehmen und anschließend mit ein wenig Javascript nachzuhelfen.
Nun fehlt mir aber das Wissen wie man Zugriff auf den Zoomfaktor bekommt.. Google lässt mich auch mal wieder im Stich..Liebe Grüße,
Bernd-
Om nah hoo pez nyeetz, Bernd!
Der aktuelle IE (!) verhält sich wie gewünscht, mit Lupe.
Also ich benutze den Internet Explorer 11 Version: 11.0.9600.17041
und die Angabe style="cursor: zoom-in;" zeigt keine Wirkung..Im Wiki-Artikel, der die Eigenschaft cursor beschreibt, kannst du ausprobieren, welche Werte unterstützt werden. Ich kann insofern bestätigen, dass der IE11 die Werte zoom-in und zoom-out nicht darstellt.
Allerdings kannst du dem IE eine eigene Lupe spendieren. Siehe http://wiki.selfhtml.org/wiki/Cursor#eigene_Grafiken bzw. http://selfhtml.apsel-mv.de/cursor/cursor.html
Browserverhalten vollumfänglich mit CSS nachbauen zu wollen, ist manchmal schwierig. Es ist eben nicht dasselbe, ob der Browser zur Anzeige eines Bildes oder eines HTML-Dokumentes benutzt wird.
Matthias
-
@@Matthias
… Es ist eben nicht dasselbe, ob der Browser zur Anzeige eines Bildes oder eines HTML-Dokumentes benutzt wird.
Ich bin davon ausgegangen das ein <a href="Bild.jpg"> benutzt wird. In diesem Fall werden zoom-Cursor angezeigt.
Beim IE ist das Anzeigen von Grafiken ohne html-Seite nicht so gut gelöst wie es bei Chrome und Firefox der Fall ist, bei beiden werden Grafiken mit feinen Linien nicht pixelig (Anti-Aliasing) verkleinert, anders beim IE, der schafft es nicht ohne unschöne Treppeneffekte. Was aber bei Fotos nur eine marginale Rolle spielen wird.
gruesse qx
-
Beim IE ist das Anzeigen von Grafiken ohne html-Seite nicht so gut gelöst wie es bei Chrome und Firefox der Fall ist, bei beiden werden Grafiken mit feinen Linien nicht pixelig (Anti-Aliasing) verkleinert, anders beim IE, der schafft es nicht ohne unschöne Treppeneffekte. Was aber bei Fotos nur eine marginale Rolle spielen wird.
Man sollte wirklich mal "Den Perfekten Browser" entwickeln auf den sich dann auch alle einigen können.. Dieses 'der kann das nicht, der kann dies nicht, bei dem ist das nicht so toll' schafft den Programmieren m.E. nur unnütze Arbeit.
Liebe Grüße,
Bernd
-
-
Allerdings kannst du dem IE eine eigene Lupe spendieren. Siehe http://wiki.selfhtml.org/wiki/Cursor#eigene_Grafiken bzw. http://selfhtml.apsel-mv.de/cursor/cursor.html
Das wäre eine Überlegung wert.. Allerdings stellt sich mir die Frage: Warum zeigt mir der Internet Explorer beim überfahren des Bildes eine Lupe an - obwohl ja die zoom-in/out Cursor nicht unterstützt werden.. bedeutet das etwa, dass der Internet Explorer irgendwo einen Lupen-Cursor mitliefert und dass er nicht 'zoom-in' heißt sondern anders? Irgendwo / -wie muss die Lupe ja dort hinkommen..
Browserverhalten vollumfänglich mit CSS nachbauen zu wollen, ist manchmal schwierig. Es ist eben nicht dasselbe, ob der Browser zur Anzeige eines Bildes oder eines HTML-Dokumentes benutzt wird.
Ohh ja.. Es beginnt alles mit einem kleinen Einfall und einem darauf folgenden "Ich will doch nur mal eben ~"...
Liebe Grüße,
Bernd
-
-
-
-
-
-
-
