Trung tâm hình ảnh quá khổ trong Div

Tôi đã cố gắng sắp xếp làm thế nào để căn giữa một hình ảnh quá khổ trong một div chỉ bằng css.

Chúng tôi đang sử dụng bố cục chất lỏng, vì vậy chiều rộng của các thùng chứa hình ảnh thay đổi theo chiều rộng của trang (chiều cao của div là cố định). Hình ảnh nằm trong một div, xác định giá trị hình hộp bên trong để xuất hiện như thể bạn đang xem qua trang ở hình ảnh.

Hình ảnh đã được kích thước để lấp đầy div xung quanh ở giá trị rộng nhất có thể của nó (thiết kế có max-widthgiá trị).

Nó khá dễ thực hiện nếu hình ảnh nhỏ hơn div xung quanh:

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

Nhưng khi hình ảnh lớn hơn div, nó chỉ bắt đầu ở cạnh trái và nằm ở giữa bên phải (chúng tôi đang sử dụng overflow: hidden).

Chúng tôi có thể chỉ định một width=100%, nhưng các trình duyệt thực hiện một công việc tệ hại là thay đổi kích thước hình ảnh và các trung tâm thiết kế web xung quanh hình ảnh chất lượng cao.

Bất kỳ ý tưởng về trung tâm hình ảnh để overflow:hiddencắt đều cả hai cạnh?

Hãy thử một cái gì đó như thế này. Điều này sẽ tập trung bất kỳ yếu tố lớn nào ở giữa theo chiều dọc và chiều ngang đối với cha mẹ của nó, bất kể cả hai kích thước của chúng.

.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;

}

Đây là một Q cũ, nhưng một giải pháp hiện đại không có flexbox hoặc vị trí hoạt động tuyệt đối như thế này.

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>

Vậy tại sao nó hoạt động?
Thoạt nhìn có vẻ như chúng ta dịch chuyển 50% sang phải và sau đó 50% sang trái. Điều đó sẽ dẫn đến sự thay đổi bằng không, vậy thì sao?
Nhưng 50% không giống nhau, vì bối cảnh rất quan trọng. Nếu bạn sử dụng các đơn vị tương đối, một lề sẽ được tính bằng tỷ lệ phần trăm chiều rộng của phần tử cha , trong khi biến đổi sẽ là 50% so với phần tử tương tự .

Chúng tôi có tình huống này trước khi chúng tôi thêm CSS

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

Với phong cách thêm vào, margin-left: 50%chúng tôi có

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

       a is 50% width of P

Và sự transform: translateX(-50%)dịch chuyển về bên trái

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

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

Thật không may, điều này chỉ hoạt động đối với định tâm ngang vì tính toán tỷ lệ phần trăm lề luôn luôn tương đối với chiều rộng. Tức là không chỉ margin-leftvà margin-right, mà còn margin-topvà margin-bottomđược tính theo chiều rộng.

Khả năng tương thích trình duyệt sẽ không có vấn đề: https://caniuse.com/#feat=transforms2d

Đặt một div lớn bên trong div, chính giữa và trung tâm hình ảnh bên trong div đó.

Điều này tập trung vào nó theo chiều ngang:

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;
}

Bản trình diễn: http://jsfiddle.net/Guffa/L9BnL/

Để căn giữa nó theo chiều dọc, bạn có thể sử dụng tương tự cho div bên trong, nhưng bạn sẽ cần chiều cao của hình ảnh để đặt nó hoàn toàn bên trong nó.

Muộn trò chơi, nhưng tôi thấy phương pháp này cực kỳ trực quan. 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>

Không sử dụng chiều rộng hoặc chiều cao rõ ràng cho thẻ hình ảnh. Thay vào đó, mã nó:

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

ví dụ: http://jsfiddle.net/xwrvxser/1/

Tôi là một fan hâm mộ lớn của việc tạo hình ảnh làm nền của div / nút - sau đó bạn chỉ có thể sử dụng background-position: centerthuộc tính để căn giữa nó bất kể kích thước màn hình

Chiều rộng và chiều cao chỉ là ví dụ:

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

Nó phải hoạt động cho bạn nếu bên trái và trên cùng của div cha mẹ của bạn không phải là trên cùng và bên trái của cửa sổ màn hình của bạn. Nó làm việc cho tôi.

Tôi thấy đây là một giải pháp thanh lịch hơn, không có flex:

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

Dựa trên câu trả lời tuyệt vời của @ yunzen:

Tôi đoán nhiều người đang tìm kiếm chủ đề này đang cố gắng sử dụng một hình ảnh lớn làm hình nền "anh hùng", ví dụ như trên trang chủ. Trong trường hợp này, họ thường muốn văn bản xuất hiện trên hình ảnh và để nó thu nhỏ lại trên thiết bị di động.

Đây là CSS hoàn hảo cho một hình nền như vậy (sử dụng nó trên <img>thẻ):

/* 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;

Một tùy chọn bạn có thể sử dụng là object-fit: covernó hoạt động hơi giống background-size: cover. Thêm về đối tượng phù hợp .

bỏ qua tất cả các mã bên dưới, đó chỉ là bản demo.

Chìa khóa ở đây là bạn cần đặt hình ảnh bên trong một trình bao bọc và cung cấp cho nó các thuộc tính sau.

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

Tôi đã tạo một bản demo bên dưới nơi bạn thay đổi chiều cao / chiều rộng của trình bao bọc và xem trong khi chơi. Hình ảnh sẽ luôn được căn giữa theo chiều dọc và chiều ngang. Nó sẽ chiếm 100% chiều rộng và chiều cao cha mẹ của nó, và sẽ không bị kéo dài / đè bẹp. Điều này có nghĩa là tỷ lệ khung hình của hình ảnh được duy trì. Thay đổi được áp dụng bằng cách phóng to / thu nhỏ thay thế.

Nhược điểm duy nhất object-fitlà nó không hoạt động trên 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>