Variable Größe Bild mit max Breite/Höhe in eine Einbauküche zentriert element

Ich habe eine <a> tag mit einem <img> darin, dass ich möchte, um vertikal und horizontal auf dem Bildschirm, sondern auch eine max-height und max-width, so dass, wenn sitzt schön auf dem Bildschirm mit Leerzeichen um ihn herum. Es muss Arbeit für hoch-und Querformat-Bilder auf jedem Bildschirm Größe und kann nicht beschneiden Sie das Bild. Ich kann nicht das Bild in max-height zu arbeiten, jedoch.

Den <a> auch mit text, der positioniert ist, unter der linken Seite des Bildes, so dass ich versuche, um die Größe der <a> passen Sie die Größe des <img> um die Positionierung dieses Textes Recht.

HTML:

<a href="#">
    <img src="image.jpg" alt="it's a picture">
    <p>Image Title</p>
</a>

CSS:

a {
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
    max-width: 60%;
    max-height: 60%;
}

img {
    max-width: 100%;
    max-height: 100%;
}

p {
    position: relative;
    top: 10px;
}
Können Sie zeigen, wie ein Beispiel(wie ein Bild) wie es Aussehen sollte?
hier sind Beispiele für beide hoch-und Querformat. Ich habe einen roten Rahmen zu stellen die maximale Breite und Höhe für jedes Bild. imgur.com/a/r550u
CSS-tricks hat einen tutorial auf, wie Sie dies tun: css-tricks.com/...

InformationsquelleAutor Alex | 2014-12-31

  1. 1

    Einstellung Anteil max-width, wenn keine Breite angegeben ist fast die gleiche wie die Einstellung eine regelmäßige prozentuale Breite, also änderte ich den link Größe, einfache Breite/Höhe 60%, hoffe das ist allen Recht. Nun, der einfachste Weg, um center Dinge ist Flexbox. Sie können mehr über es hier:

    http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

    Hatte ich ein zusätzliches div-wrap-sowohl die Bild-und Untertitel, so dass der text ausgerichtet werden kann, um die unten Links im Bild.

    <a>
    <div>
        <img src="image.jpg"/>
        <span>asd</span>
    </div>
</a>

    Und hier kommt das CSS-flexbox -:

    body {
    display: flex;
    align-items: center;
    justify-content: center;
}

a {
    display: block;
    width: 60%;
    height: 60%;
    border:2px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
}

a span {
    display:block;
}

a div {
    max-width:100%;
    max-height:100%;
    display:block;
    margin:0 auto;   
}

a img {
    max-width:100%;
    max-height:100%;
    display:block;
}

    Und das ist, wie es aussieht:

    http://jsfiddle.net/9xgyu6a4/

    Arbeitet mit portrait Bilder zu:

    http://jsfiddle.net/9xgyu6a4/1/

    Flexbox-könnte eine gute Lösung sein. Ich werde geben diesem einen Versuch. Es ist jedoch nicht die Arbeit für portrait-Bilder für mich. Die Bildhöhe ist immer noch bis über die rote Grenze: imgur.com/AoZEbdh gibt es irgendeine Möglichkeit dieses Problem zu beheben und haben die Höhe begrenzt werden, indem der Boden des <a> container?
    Funktioniert bei mir im Safari / Chrome. Welchen browser verwenden Sie?
    Ich bin mit Chrome (gerade überprüft und es ist up to date) auf Yosemite. Firefox ist ein scheitern so gut. Es funktioniert auf Safari, allerdings.

    InformationsquelleAutor passatgt

  2. 0

    Diesen code bei CSS-Tricks wird Ihnen erlauben, um das Bild zu zentrieren fast direkt in der Mitte des Bildschirms:

    <a href="#">
    <img src="/pathTo/image.jpg" alt="it's a picture">
    <span class="title">The Image's Title</span>
</a>

a {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.title {
    position:fixed;
    width:327px;
    text-align:center;
}

    Der trick ist die Verwendung von festen Positionierung auf der <a> element, so dass sowohl die oberen und linken CSS-Eigenschaften berücksichtigt werden. Das Bild gewann, nicht die Größe wie der viewport kleiner wird, und bleiben zentriert im landscape - /portrait-layouts. Unter der Annahme, dass die Höhe und Breite des Bildes bekannt ist (in diesem Fall, das Bild ist 327px von 327px - ich bin nicht sicher, was genau gemeint ist mit "variable" Größe "Bild"), .title hat eine gleiche Breite auf das Bild.

    Das problem ist, dass die Größe des Bildes ist nicht bekannt, weil dieser code in einem content-management-system, wo der Benutzer Bilder hochladen und das Bild in diesem layout wird sich immer verändern. Ich muss eine Lösung finden, die funktioniert unabhängig von der Bild-und Bildschirmgröße des Betrachters an. Das problem ist nicht so sehr den Titel zum line-up, es wird immer das Bild flüssig auf den Bildschirm passen.
    Ah, ja. Ich sah nur das Bild auch der Kommentar, den du gepostet hast, zeigt das Verhalten, das Sie möchten - können Sie die post mehr code so, dass das, was Sie zeigen, in das Bild könnte repliziert werden? Auch, das Problem ist nur, dass das Bild schneidet an der Spitze? Wäre das hinzufügen Polsterung an den img Arbeit?
    Was passiert, ist, das Bild wird zu 100% von der <a> ist, die 60% der gesamten Breite, aber das Bild ist viel größer, als es ist breit, so dass es geschoben ist an der Unterseite des Bildschirms. Es ignoriert die max-Höhe. Welchen code würdest du gerne sehen? Dass <a> ist nur sitzen in einem <body> mit der Höhe auf 100% gesetzt und es gibt nicht viel anderes dort.
    Ich warf gerade den code, den Sie geschrieben, in einen text-editor und die Positionierung war ein wenig seltsam; es hat nicht übereinstimmen mit dem Bild, das Sie gepostet. In jedem Fall ist dies über mein know-how und passatgt Antwort ist besser.
    das Bild, das ich gepostet wurde in photoshop erstellt wurden, als ein grobes Beispiel, was ich versuche, das Bild zu tun. Ich glaube nicht, es würde sich angepasst haben, die mit meinem code.

    InformationsquelleAutor alex

Schreibe einen Kommentar