Wie verschiebt man den POV eines Bildes bei Verwendung von Überlauf: versteckt?

Question

Nachdem ich lange gesucht hatte, fand ich schließlich heraus, wie man ein Bild schneidet, ohne ein Bild zu verzerren/zu quetschen, indem man overflow: hidden; verwendet. Jetzt mein nächstes Problem; Wie würde ich das Bild zeigen einen Teil, den ich will, das heißt, wenn Sie die overflow:hidden verwenden, zeigt es das Bild von oben, anstatt die Mitte oder unten. Wie kann ich das einstellen und das Bild von unten oder von der Mitte anzeigen? Zum besseren Verständnis sehen Sie sich bitte die Bilder an, die ich in Photoshop erstellt habe. Bildbeschreibung in der Reihenfolge: Standardbild, was css standardmäßig mit Überlauf tut: versteckt, was ich will (mittlerer pov), was ich will (bottom pov).
Danke.
Edit: Mein Layout ist: Eltern Div mit dem Bild div als Kind. Die Höhe des Eltern-Divs ist auf 600 px und die Breite auf 100% festgelegt. Und Höhe und Breite des Bildes div als 100% definiert.

Answer 1

Angenommen, Ihre gewünschte Breite/Höhe und overflow: hidden an einem äußeren enthält div angewendet wird, kann man so etwas hinzufügen:

.container img { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Dies würde den angezeigten Bereich des Umzugs Stellen Sie das Bild um 50% der Behälterhöhe (top: 50%) ab, und stellen Sie dann 50% der Bildhöhe wieder her (transform: translateY(-50%)), wodurch es im Behälter zentriert wird.

Sie können diese Werte anpassen, um eine andere Positionierung zu erreichen, oder fügen Sie left: und transform: translateX() hinzu, um die horizontale Achse anzupassen.

Answer 2

In welcher Weise werden Sie das Bild mit Hilfe?

Wenn Sie dies als ein Hintergrundbild verwenden, ist die Lösung viel einfacher und würde einfach Hintergrundpositionierung verwenden. Wenn Sie dies als ein Bild verwenden, das mit einem img-Tag eingezogen wurde, können Sie das Bild wie folgt manipulieren.

Beachten Sie, dass dies nicht bei jedem Browser funktioniert.

.new-image-container { 
 
    position: relative; 
 
    width: 250px; 
 
    height: 250px; 
 
    overflow: hidden; 
 
} 
 
.new-image-container img { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    height: 100%; 
 
    width: auto; 
 
    -webkit-transform: translate(-50%,-90%); 
 
     -ms-transform: translate(-50%,-90%); 
 
      transform: translate(-50%,-90%); 
 
}

<div class="new-image-container"> 
 
    <img src="http://i.stack.imgur.com/j8aQR.jpg"></img> 
 
</div>

Answer 3

Hier ist meine Antwort/Lösung für jeden, der auf diesen Beitrag stößt.

#Banner { 
 
    width: 100%; 
 
    height: 350px 
 
} 
 
#backgroundBanner { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
#backgroundBanner img { 
 
    width: 100%; 
 
    position: relative; 
 
    top: 70%; /*make changes to this and below to adjust the positioning of the image*/ 
 
    transform: translateY(-70%);

<div id="Banner"> 
 
    <div id="backgroundBanner"> 
 
    <img src="https://www.mathworks.com/matlabcentral/mlc-downloads/downloads/submissions/55312/versions/4/screenshot.jpg"> 
 
    </div> 
 
</div>