Bilder mit der optimalen Größe anzeigen

[Jonas]

Hallo Leute,
ich habe da ein paar Bilder auf meiner Seite - von unterschiedlichster Auflösung (200x200 bis zu 2000x2000) - .
Die Bilder habe ich als "Vorschaubildchen" - also in geringer Höhe und Breite - eingebaut. Bei einem Klick auf eines der Bildchen lege ich mit Javascript einen schwarzen, aber durchsichtigen, Schleier über das ganze Dokument und darüber wiederum das angeklickte Bild in groß.
Nun weiß ich nicht wie ich es gestaltungsmäßig so hinbekomme dass die kleinen Bilder (200x200) als auch die großen Bilder (2000x2000) optimal dargestellt werden. Die größeren bekomme ich perfekt gestaltet mit: ~~~css img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
}

Dies sieht allerdings bei kleineren Bildern nicht so dolle aus wenn die dann auf 100% gestreckt werden.  
Gibt es eine bessere CSS Lösung die auflösungsunabhängig ein optimales Bild erzeugt? (Oder eine Javascript-Lösung? Immer her mit Ansätzen :)  
  
Grüße, Jonas

[Bobby]

Moin

perfekt gestaltet mit: ~~~css img {

position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
}

  
wie wärs mit max-height statt height?  
  
Übrigens würde ich hier immer nur maximal 94% und margin 3% angeben, das sieht einfach schöner aus.  
  
Gruß Bobby  

-- 
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-  
### Henry L. Mencken ###  
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-  
### Viktor Frankl ###  
  
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)

[Gunnar Bittersmann]

@@Bobby:

nuqneH

wie wärs mit max-height statt height?

Und mit max-width dasselbe auch für die Horizontale.

Qapla'

[Bobby]

Moin

wie wärs mit max-height statt height?

Und mit max-width dasselbe auch für die Horizontale.

selbstverständlich!

Gruß Bobby

[Jonas]

Hey,

img {  

> >     position: absolute;  
> >     top: 0;  
> >     bottom: 0;  
> >     left: 0;  
> >     right: 0;  
> >     margin: auto;  
> >     height: 100%;  
> > }

wie wärs mit max-height statt height?

Bingo! Meine Güte, was 3 Buchstaben und ein Minus ausmachen kann.

Übrigens würde ich hier immer nur maximal 94% und margin 3% angeben, das sieht einfach schöner aus.

Gut, vom Aussehen her hat es schon was wenn das Bild nicht so groß ist wie das ganze Fenster.. so von Kopf bis Fuß da sieht man ja nicht dass das Bild ganz unten wirklich zu Ende ist.
Mit max-height: 94% habe ich nun ein horizontal sowie vertical zentriertes Bild - ein ansprechendes Layout.
Aber deinen Vorschlag mit margin: 3% verstehe ich nicht ganz. Oder findest du es ansprechender wenn das Bild nicht zentriert ausgegeben wird?

Grüße, Jonas

[Bobby]

Moin

Aber deinen Vorschlag mit margin: 3% verstehe ich nicht ganz. Oder findest du es ansprechender wenn das Bild nicht zentriert ausgegeben wird?

das margin sollte ausmitteln. Hast es ja anders gelöst. ;)

Gruß Bobby

[Camping_RIDER]

Aloha ;)

Aber deinen Vorschlag mit margin: 3% verstehe ich nicht ganz. Oder findest du es ansprechender wenn das Bild nicht zentriert ausgegeben wird?

Du hast Recht, der Vorschlag war etwas verfrüht von meinem Vorredner.

margin:3% könntest du nutzen, wenn klar wäre, dass das Bild tatsächlich auf 94% in Höhe UND Breite skaliert wird - denn dann hast du überall denselben Abstand und somit ist es wieder zentriert.

In deinem Fall ist das aber Quark, da du die tatsächliche Höhe und Breite nicht kennst. Deshalb ist ein zentrieren durch margin:auto schon angemessen.

Du wirst aber feststellen, dass das nur eine seitliche Zentrierung bewirkt. Ich würde also zu einer Mischlösung raten:

margin: 3% auto;

Dadurch hast du horizontal noch die gewünschte Zentrierung unabhängig von der Bildbreite und nach oben und unten hin mindestens 3% Abstand - so dass die Bilder immer am oberen Rand angedockt sind und im Fall von Hochformat-Bildern eine Zentrierung in beiden Richtungen stattfindet.

Dass du nicht nur eine der Angaben, sondern sowohl als auch, d.h.

max-height: 94%;
max-width: 94%;

benutzen solltest, wurde ja schon gesagt.

Grüße,

RIDER

[Bobby]

Moin

Du hast Recht, der Vorschlag war etwas verfrüht von meinem Vorredner.

margin:3% könntest du nutzen, wenn klar wäre, dass das Bild tatsächlich auf 94% in Höhe UND Breite skaliert wird - denn dann hast du überall denselben Abstand und somit ist es wieder zentriert.

In deinem Fall ist das aber Quark, da du die tatsächliche Höhe und Breite nicht kennst. Deshalb ist ein zentrieren durch margin:auto schon angemessen.

Du wirst aber feststellen, dass das nur eine seitliche Zentrierung bewirkt. Ich würde also zu einer Mischlösung raten:

margin: 3% auto;

genau so.. war unüberlegt und nur auf die schnelle runter geschrieben. Sorry.

Gruß Bobby

[Jonas]

Hey,

Du wirst aber feststellen, dass das nur eine seitliche Zentrierung bewirkt. Ich würde also zu einer Mischlösung raten:
margin: 3% auto;
Dadurch hast du horizontal noch die gewünschte Zentrierung unabhängig von der Bildbreite und nach oben und unten hin mindestens 3% Abstand - so dass die Bilder immer am oberen Rand angedockt sind und im Fall von Hochformat-Bildern eine Zentrierung in beiden Richtungen stattfindet.

Es ist mir schleierhaft warum margin: 3% auto; etwas eigenartiges mit dem Layout anstellt: oberhalb des Bildes ist ca. 1,5 Mauszeiger Platz zum Dokumentrand und unterhalb sind es ca. 0,5...

img {  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    max-height: 94%;  
    max-width: 94%;  
    margin: 3% auto;  
}

Grüße, Jonas

[Camping_RIDER]

Aloha ;)

Es ist mir schleierhaft warum margin: 3% auto; etwas eigenartiges mit dem Layout anstellt: oberhalb des Bildes ist ca. 1,5 Mauszeiger Platz zum Dokumentrand und unterhalb sind es ca. 0,5...

img {

position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 94%;
    max-width: 94%;
    margin: 3% auto;
}

  
Was meinst du mit "mit dem Layout"?  
  
Grundsätzlich ist es ja, wie beschrieben, bei Querformat-Bildern so, dass oben die 3% Abstand sind und unten mehr...  
  
Ansonsten noch ein anderer Vorschlage: Du positionierst hier mit absolute. Stell doch mal auf top:3%, margin:auto und lass die Angaben für bottom, left, right weg. Mich wundert so oder so, dass dir das keine Probleme macht... Schließlich bewirkt eine Angabe von allen vier Werten afaik, dass die Bildgröße dadurch bestimmt wird, was du ja eigentlich nicht willst (denn du willst ja eben nicht, dass width:100%, height:100% gilt...)  
  
Oder hab ich dich da jetzt falsch verstanden? Wenn ja, kannst du einen Screenshot machen oder die Problemseite live verlinken?  
  
Grüße,  
  
RIDER  
  

-- 
Camping\_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller  
  
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[  

[Jonas]

Hey,
habe mich jetzt für mein normales margin: auto entschieden.

Ansonsten noch ein anderer Vorschlage: Du positionierst hier mit absolute. Stell doch mal auf top:3%, margin:auto und lass die Angaben für bottom, left, right weg. Mich wundert so oder so, dass dir das keine Probleme macht... Schließlich bewirkt eine Angabe von allen vier Werten afaik, dass die Bildgröße dadurch bestimmt wird, was du ja eigentlich nicht willst (denn du willst ja eben nicht, dass width:100%, height:100% gilt...)

Hier übernehme ich mal die Rolle des Wissenden :)
Wenn du mal in deinem Borwser (bei Firefox zumindest) mal ein Bild öffnest wie z.B file:///C:/Users/Jonas/Desktop/bild.jpg (oder whatever) und dann mal F12 drückst und das <img> mal genauer unter die Lupe nimmst wirst du fündig werden.   Oder du folgst mal diesem Link.

Grüße, Jonas

[Herrmann]

... wie ich es gestaltungsmäßig so hinbekomme dass die kleinen Bilder (200x200) als auch die großen Bilder (2000x2000) optimal dargestellt werden. Die größeren bekomme ich perfekt gestaltet mit: ~~~css

img {

...
    height: 100%;
}

> Dies sieht allerdings bei kleineren Bildern nicht so dolle aus wenn die dann auf 100% gestreckt werden.  
  
Reicht es nicht schon "height:100%" durch "max-height:100%" zu ersetzen?  
  
Gruß H.