Zentrieren Sie ein großes Bild unbekannter Größe in einem kleineren Div mit verstecktem Überlauf

Ich möchte ein Bild in einem Div ohne Javascript und ohne Hintergrundbilder zentrieren .

Hier ist ein Beispielcode

<div> 
    <img src="/happy_cat.png"/> 
</div>

• Ich kenne die Größe des Bilds nicht und es sollte in der Lage sein, die Breite des übergeordneten Elements zu überschreiten
• Ich kenne die Breite des übergeordneten Div nicht (es ist 100%)
• Das übergeordnete Div hat eine feste Höhe
• Das Bild ist größer als das übergeordnete und das übergeordnete Bild hat einen Überlauf: versteckt
• Müssen nur moderne Browser unterstützen

Erwünschtes Ergebnis. (Ignorieren Sie Trübungen usw., beachten Sie einfach die Positionierung).

Ich weiß, dass dies mit Hintergrundbildern leicht möglich ist, aber das ist für mich keine Option. Ich könnte auch Javascript verwenden, aber es scheint ein sehr hartnäckiger Weg zu sein, dies zu erreichen.

Vielen Dank!

Jack

Was ist damit:

.img {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
}

Dies setzt voraus, dass das übergeordnete div relativ positioniert ist. Ich denke, das funktioniert, wenn Sie die .img eher relativ als absolut positioniert haben wollen. Entfernen Sie einfach die position: absoluteund ändern Sie oben / links zu margin-topund margin-left.

Sie wollen wahrscheinlich Browser - Unterstützung mit hinzuzufügen transform, -moz-transformusw.

Alte Frage, neue Antwort:

Wenn das Bild größer als das Umbruch-Div ist, funktioniert eine automatische Textausrichtung: Mitte oder Rand: Auto nicht. Wenn das Bild jedoch kleiner ist, führen Lösungen mit absoluter Positionierung oder einem negativen linken Rand zu seltsamen Effekten.

Wenn die Bildgröße (wie bei einem CSM) nicht im Voraus bekannt ist und möglicherweise größer oder kleiner als das Wrapping-Div ist, gibt es eine elegante CSS3-Lösung, die allen Zwecken dient:

div {
    display: flex;
    justify-content: center;
    height: 400px; /* or other desired height */
    overflow: hidden;
}
img {
    flex: none; /* keep aspect ratio */
}

Beachten Sie, dass Sie abhängig von anderen Regeln in Ihrem Stylesheet möglicherweise width: auto und / oder max-width: none an das img anhängen müssen.

Das ist immer etwas schwierig und es gibt viele Lösungen. Ich finde die beste Lösung die folgende. Dies zentriert es sowohl vertikal als auch horizontal.

CSS

#container {
    height: 400px;
    width: 400px;
}
.image {
    background: white;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.left {
    width: 100px;
    height: 100%;
    z-index: 2;
    background: white;
    top: 0px;
    position: absolute;
    left: 0px;
}
.right {
    width: 100px;
    height: 100%;
    z-index: 2;
    position: absolute;
    background: white;
    top: 0px;
    right: 0px;
}
.image img {
    margin: auto;
    display: block;
}

HTML

    <div id="container">
<div class="image">
    <div class="left"></div>
    <div class="right"></div>
    <img width="500" src="https://www.google.com.au/images/srpr/logo11w.png" />
</div>

Siehe Geige

etwas andere Technik: Geige

Vielen Dank an alle für Ihre Hilfe. Ich werde dies nur in CSS für unerreichbar halten.

Ich werde zu einer jQuery-Lösung wechseln. Hier ist ein [Pseudo] Code für Interessierte.

Ich wollte eine CSS-Lösung aufgeben, aber es sieht so aus, als ob dies möglich ist (siehe akzeptierte Antwort). Hier ist die JS-Lösung, mit der ich gehen wollte.

var $img = $('img'),
    w = $img.width();

$img.css({marginLeft: -w});

Und das dazugehörige CSS

img{
  position:absolute;
  left:50%;
}

Ich weiß, dass dies alt ist, aber ich habe auch eine reine CSS-Lösung gefunden, die der oben genannten sehr ähnlich ist.

.parent {
    float: left;
    position: relative;
    width: 14.529%; // Adjust to your needs
}

.parent img {
    margin: auto;
    max-width: none; // this was needed for my particular instance
    position: absolute;
    top: 11px; right: -50%; bottom: 0; left: -50%;
    z-index: 0;
}

Initialisieren Sie einfach die Position Ihres Bildes wie folgt.

HTML:

<div> 
    <img id="img" src="/happy_cat.png"/> 
</div>

CSS:

#img {
    left: 0;
    right: 0;
}

Oder schauen Sie mit einem margin: auto;

Dies ist für die horizontale Ausrichtung. Um es auch vertikal auszurichten, können Sie es display: table-cell;mit Ihrem <div>Dann tun , vertical-align: middle;aber es ist keine gute Übung, da Sie <div>kein Tisch sind.