IMG in einem DIV zentrieren ohne gegebene Höhe & Breite

[Tim Lorens]

Hallu,

ich hab ein Bild, welches eine maximale Höhe und Breite hat mit ein paar Tricks in einem darüberliegenden DIV (dessen Höhe und Breite mehr oder weniger ebenfalls unbekannt ist) zentriert. Das klappt auch super, wenn das Bild die maximalgröße nicht überschreitet.

Folgender Code:

.user .main .left {
    float: left;
    width: 118px;
    height: 118px;
    text-align: center;
    border: 1px solid #BBB;
    border-radius: 3px;
    padding: 5px;
}

.user .main .left:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-left: -0.25em;
}

.user .main .left img {
    vertical-align: middle;
    display: inline-block;
    max-width: 118px;
    max-height: 118px;
}

Dazu HTML:

<div class="user">
    <div class="main">
        <div class="left">
            <img src="../mvc/img/avatars/<?=$oUser->getAvatar()?>" />
        </div>
    </div>
</div>

Wenn ich in .user .main .left.before content und height entferne, würde das für zu große Bilder klappen, allerdings wären dann die kleineren Bilder (kleiner als 118x118px) nur noch horizontal und nicht zusätzlich vertikal zentiert.

Weiß mir jemand zu helfen?:)

 

[MrMurphy]

Hallo,

welche Browser müssen denn unterstützt werden?

Gruss

MrMurphy

 

[Tim Lorens]

Am besten wären alle, sprich Firefox, Opera, Chrome & Safari.

 

[MrMurphy]

Und welche Versionen des IE? Der ist in der Regel der Knackpunkt.

 

[Tim Lorens]

Eigentlich garkeine.

 

[threadi]

Keine IE-Version? Dann mach aus .left ein display: table-cell und lass das floating weg. Dann müsste das Bild innerhalb des Elementes auch vertikal zentriert werden.

 

[Tim Lorens]

Stimmt, müsste. Leider dennoch nur horizontal.

 

[threadi]

Kann man das unter einem Link sehen?

 

[Tim Lorens]

Sicher, ich lad das mal als Test auf meinen Webspace. Link folgt dann :)

EDIT: Hier, habs mal n wenig minimiert und angepasst, ist aber im wesentlichen das gleiche, wie ich es auf meiner richtigen Seite anwende: http://bttt.de/pos.html

 

[djheke]

Versuch's mal so

.user .main .left {
         float: left;
         width: 128px;
         height: 100%;
         text-align: center;
         border: 1px solid #BBB;
         border-radius: 3px;
         padding: 1px;
  position:relative;
       }
      
      
       .user .main .left img {
         max-width: 100%;
         max-height: 100%;
        position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
       }

und das kann komplett weg

.user .main .left:before {
margin-left: -0.25em;
content: "";
height: 100%;
vertical-align: middle;
display: inline-block;
}

Wobei display:table und display:table-cell einfacher ist.

 

[Tim Lorens]

Sehr cool, dankeschön!:)