Как перемещать POV изображения при использовании переполнения: скрыто?

Question

Итак, после долгого времени поиска я наконец выяснил, как обрезать изображение без искажения/сжатия изображения с помощью overflow: hidden;. Теперь моя следующая проблема; Как бы я хотел, чтобы изображение показывало часть, которую я хочу, то есть при использовании overflow:hidden она отображает изображение сверху, а не в середине или снизу. Как я могу настроить это и показать изображение снизу или середине? Чтобы помочь лучше понять, пожалуйста, просмотрите изображения, которые я создал в Photoshop. Описание изображения по порядку: изображение по умолчанию, что делает css по умолчанию с переполнением: скрытый, что я хочу (средний pov), что я хочу (нижний pov).
Спасибо.
Редактировать: Мой макет: родительский div с изображением div как ребенок. Высота родительского div равна 600px и ширине 100%. И высота и ширина изображения div определяются как 100%.

Answer 1

Предполагая нужную ширину/высоту и overflow: hidden наносится на внешнюю, содержащий DIV, вы можете добавить что-то вроде:

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

Это сдвинет отображаемую область снимите 50% высоты контейнера (top: 50%), затем поддержите 50% высоты изображения (transform: translateY(-50%)), которая заканчивается центрированием его внутри контейнера.

Вы можете отрегулировать эти значения для достижения другого позиционирования или добавить left: и transform: translateX() для регулировки горизонтальной оси.

Answer 2

Каким образом вы используете этот образ?

Если вы используете это как фоновое изображение, решение намного проще и просто будет включать использование фонового позиционирования. Если вы используете это как изображение, втянутое с помощью тега img, вы можете попробовать использовать ниже, чтобы манипулировать изображением.

Помните, что это не будет работать в каждом браузере.

.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

Вот мой ответ/решение для всех, кто сталкивается с этим сообщением.

#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>