Pusatkan Gambar Oversized di Div

Saya telah mencoba memilah bagaimana memusatkan gambar yang terlalu besar dalam div menggunakan css saja.

Kami menggunakan tata letak yang cair, sehingga lebar wadah gambar bervariasi seperti lebar halaman (ketinggian div diperbaiki). Gambar duduk di dalam div, dengan nilai sebuah kotak bayangan inset sehingga muncul seolah-olah Anda melihat melalui halaman di gambar.

Gambar itu sendiri telah berukuran untuk mengisi div sekitarnya pada nilai seluas mungkin (desain memiliki max-widthnilai).

Sangat mudah dilakukan jika gambar lebih kecil dari div sekitarnya:

margin-left: auto;
margin-right: auto;
display: block; 

Tetapi ketika gambar lebih besar dari div itu hanya mulai di tepi kiri dan dari pusat ke kanan (kami menggunakan overflow: hidden).

Kami dapat menetapkan width=100%, tetapi browser melakukan pekerjaan yang buruk untuk mengubah ukuran gambar dan desain web berpusat pada citra berkualitas tinggi.

Adakah ide untuk memusatkan gambar sehingga overflow:hiddenmemotong kedua sisi secara merata?

Coba sesuatu seperti ini. Ini harus memusatkan elemen besar di tengah secara vertikal dan horizontal sehubungan dengan induknya, tidak peduli ukurannya.

.parent {
    position: relative;
    overflow: hidden;
    //optionally set height and width, it will depend on the rest of the styling used
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;

}

Ini adalah Q lama, tetapi solusi modern tanpa flexbox atau posisi benar-benar berfungsi seperti ini.

margin-left: 50%;
transform: translateX(-50%);

.outer {
  border: 1px solid green;
  margin: 20px auto;
  width: 20%;
  padding: 10px 0;
  /*   overflow: hidden; */
}

.inner {
  width: 150%;
  background-color: gold;
  /* Set left edge of inner element to 50% of the parent element */
  margin-left: 50%; 
  /* Move to the left by 50% of own width */
  transform: translateX(-50%); 
}

<div class="outer">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem error nemo amet cum quia eaque alias nihil, similique laboriosam enim expedita fugit neque earum et esse ad, dolores sapiente sit cumque vero odit! Ullam corrupti iure eum similique magnam voluptatum ipsam. Maxime ad cumque ut atque suscipit enim quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi impedit esse modi, porro quibusdam voluptate dolores molestias, sit dolorum veritatis laudantium rem, labore et nobis ratione. Ipsum, aliquid totam repellendus non fugiat id magni voluptate, doloribus tenetur illo mollitia. Voluptatum.</div>
</div>

Jadi mengapa ini berhasil?
Pada pandangan pertama tampaknya kita menggeser 50% ke kanan dan kemudian 50% ke kiri lagi. Itu akan menghasilkan nol shift, jadi apa?
Tetapi 50% tidak sama, karena konteks itu penting. Jika Anda menggunakan unit relatif, margin akan dihitung sebagai persentase dari lebar elemen induk , sedangkan transformasi akan menjadi 50% relatif terhadap elemen yang sama .

Kami memiliki situasi ini sebelum kami menambahkan CSS

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
       +-----------------------------------------------------------+
       | Element E                                                 |
       +-----------------------------------------------------------+
       |                                           |
       +-------------------------------------------+

Dengan gaya tambahan yang margin-left: 50%kami miliki

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
       |                     +-----------------------------------------------------------+
       |                     | Element E                                                 |
       |                     +-----------------------------------------------------------+
       |                     |                     |
       +---------------------|---------------------+
       |========= a ========>|

       a is 50% width of P

Dan transform: translateX(-50%)bergeser kembali ke kiri

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
+-----------------------------------------------------------+
| Element E                 |                               |
+-----------------------------------------------------------+
|<============ b ===========|                      |
       |                    |                      |
       +--------------------|----------------------+
       |========= a =======>|

       a is 50% width of P
       b is 50% width of E

Sayangnya ini hanya berfungsi untuk pemusatan horizontal karena perhitungan persentase margin selalu relatif terhadap lebar. Yaitu tidak hanya margin-leftdan margin-right, tetapi juga margin-topdanmargin-bottom dihitung sehubungan dengan lebar.

Kompatibilitas browser seharusnya tidak menjadi masalah: https://caniuse.com/#feat=transforms2d

Letakkan div besar di dalam div itu, tengah itu, dan tengah gambar di dalam div itu.

Ini berpusat secara horizontal:

HTML:

<div class="imageContainer">
  <div class="imageCenterer">
    <img src="http://placekitten.com/200/200" />
  </div>
</div>

CSS:

.imageContainer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
.imageCenterer {
  width: 1000px;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -500px;
}
.imageCenterer img {
  display: block;
  margin: 0 auto;
}

Demo: http://jsfiddle.net/Guffa/L9BnL/

Untuk memusatkannya secara vertikal juga, Anda dapat menggunakan yang sama untuk div bagian dalam, tetapi Anda akan membutuhkan ketinggian gambar untuk menempatkannya di dalamnya.

Terlambat dalam permainan, tetapi saya menemukan metode ini sangat intuitif. https://codepen.io/adamchenwei/pen/BRNxJr

CSS

.imageContainer {
  border: 1px black solid;

  width: 450px;
  height: 200px;
  overflow: hidden;
}
.imageHolder {
  border: 1px red dotted;

  height: 100%;
  display:flex;
  align-items: center;
}
.imageItself {
  height: auto;
  width: 100%;
  align-self: center;

}

HTML

<div class="imageContainer">
  <div class="imageHolder">
    <img class="imageItself" src="http://www.fiorieconfetti.com/sites/default/files/styles/product_thumbnail__300x360_/public/fiore_viola%20-%202.jpg" />
  </div>
</div>

Jangan gunakan lebar atau tinggi tetap atau eksplisit untuk tag gambar. Alih-alih, buat kode:

      max-width:100%;
      max-height:100%;

mis: http://jsfiddle.net/xwrvxser/1/

Saya penggemar berat membuat gambar latar belakang div / node - maka Anda bisa menggunakan background-position: centeratribut untuk memusatkannya terlepas dari ukuran layar

Lebar dan tinggi hanya sebagai contoh:

parentDiv{
    width: 100px;
    height: 100px;
    position:relative; 
}
innerDiv{
    width: 200px;
    height: 200px;
    position:absolute; 
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Ini harus bekerja untuk Anda jika bagian kiri dan atas div orang tua Anda bukan bagian paling atas dan kiri dari jendela layar Anda. Ini bekerja untuk saya.

Saya menemukan ini menjadi solusi yang lebih elegan, tanpa fleksibel:

.wrapper {
    overflow: hidden;
}
.wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* height: 100%; */ /* optional */
}

Membangun jawaban hebat @ yunzen:

Saya menduga banyak orang yang mencari topik ini mencoba menggunakan gambar besar sebagai gambar latar belakang "pahlawan", misalnya di beranda. Dalam hal ini, mereka sering ingin teks muncul di atas gambar dan menurunkannya pada perangkat seluler.

Berikut ini adalah CSS yang sempurna untuk gambar latar belakang tersebut (gunakan pada <img>tag):

/* Set left edge of inner element to 50% of the parent element */
margin-left: 50%;

/* Move to the left by 50% of own width */
transform: translateX(-50%);

/* Scale image...(101% - instead of 100% - avoids possible 1px white border on left of image due to rounding error */
width: 101%;

/* ...but don't scale it too small on mobile devices - adjust this as needed */
min-width: 1086px;

/* allow content below image to appear on top of image */
position: absolute;
z-index: -1;

/* OPTIONAL - try with/without based on your needs */
top: 0;

/* OPTIONAL - use if your outer element containing the img has "text-align: center" */
left: 0;

Salah satu opsi yang dapat Anda gunakan adalah object-fit: coverberperilaku seperti background-size: cover. Lebih lanjut tentang objek-fit .

abaikan semua JS di bawah ini, itu hanya untuk demo.

Kuncinya di sini adalah bahwa Anda perlu mengatur gambar di dalam pembungkus dan memberikannya properti berikut.

.wrapper img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Saya telah membuat demo di bawah ini di mana Anda mengubah tinggi / lebar pembungkus dan melihat bermain. Gambar akan selalu terpusat secara vertikal dan horizontal. Ini akan mengambil 100% dari lebar dan tinggi induknya, dan tidak akan diregangkan / tergencet. Ini berarti bahwa rasio aspek gambar dipertahankan. Perubahan diterapkan dengan cara memperbesar / memperkecil.

Satu-satunya downside object-fitadalah bahwa itu tidak berfungsi pada IE11.

// for demo only
const wrapper = document.querySelector('.wrapper');
const button = document.querySelector('button');
const widthInput = document.querySelector('.width-input');
const heightInput = document.querySelector('.height-input');


const resizeWrapper = () => {
  wrapper.style.width = widthInput.value + "px";
  wrapper.style.height = heightInput.value + "px";
}

button.addEventListener("click", resizeWrapper);

.wrapper {
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 2em;
  border: 1px solid red;
}

.wrapper img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div class="wrapper">
  <img src="https://i.imgur.com/DrzMS8i.png">
</div>


<!-- demo only -->
<lable for="width">
  Width: <input name="width" class='width-input'>
</lable>
<lable for="height">
  height: <input name="height" class='height-input'>
</lable>
<button>change size!</button>