ศูนย์ภาพขนาดใหญ่ในกอง

ฉันพยายามเรียงลำดับภาพที่มีขนาดใหญ่ภายใน div โดยใช้ css เท่านั้น

เรากำลังใช้เลย์เอาต์ของเหลวดังนั้นความกว้างของภาชนะบรรจุรูปภาพจึงแตกต่างกันไปตามความกว้างของหน้ากระดาษ (แก้ไขความสูงของ div) รูปภาพตั้งอยู่ภายใน div ด้วยค่า boxshadow ที่ใส่เข้าไปเพื่อให้ปรากฏราวกับว่าคุณกำลังดูหน้าของภาพ

ขนาดของภาพเองนั้นมีขนาดใหญ่เพื่อเติม div ที่อยู่รอบ ๆ ด้วยค่าที่เป็นไปได้ที่กว้างที่สุด (การออกแบบมีmax-widthค่า)

มันค่อนข้างง่ายที่จะทำถ้าภาพเล็กกว่า div ที่อยู่โดยรอบ:

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

แต่เมื่อรูปภาพมีขนาดใหญ่กว่า div มันก็เริ่มที่ขอบซ้ายและอยู่กึ่งกลางทางด้านขวา (เรากำลังใช้overflow: hidden)

เราสามารถกำหนด a width=100%แต่เบราว์เซอร์ทำงานปรับขนาดภาพและศูนย์ออกแบบเว็บไซต์ให้มีภาพคุณภาพสูง

มีแนวคิดใดในการจัดกึ่งกลางภาพเพื่อoverflow:hiddenตัดขอบทั้งสองให้เท่ากัน

ลองอะไรเช่นนี้ สิ่งนี้ควรจัดวางองค์ประกอบขนาดใหญ่ไว้ตรงกลางในแนวตั้งและแนวนอนโดยคำนึงถึงผู้ปกครองไม่ว่าจะมีขนาดเท่าใดก็ตาม

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

}

นี่คือ Q เก่า แต่โซลูชันที่ทันสมัยโดยไม่มี flexbox หรือตำแหน่งสัมบูรณ์ทำงานเช่นนี้

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>

แล้วทำไมมันถึงได้ผล
จากภาพรวมในครั้งแรกดูเหมือนว่าเราจะเปลี่ยน 50% ไปทางขวาแล้ว 50% ไปทางซ้ายอีกครั้ง นั่นจะส่งผลให้ไม่มีการเลื่อนศูนย์ดังนั้นจะเป็นอย่างไร
แต่ 50% นั้นไม่เหมือนกันเพราะบริบทเป็นสิ่งสำคัญ หากคุณใช้หน่วยที่สัมพันธ์กันจะมีการคำนวณระยะขอบเป็นเปอร์เซ็นต์ของความกว้างขององค์ประกอบหลักในขณะที่การแปลงจะเป็น 50% ที่สัมพันธ์กับองค์ประกอบเดียวกัน

เรามีสถานการณ์นี้ก่อนที่เราจะเพิ่ม CSS

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

ด้วยสไตล์ที่เพิ่มเข้ามาmargin-left: 50%เรามี

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

       a is 50% width of P

และtransform: translateX(-50%)เลื่อนกลับไปทางซ้าย

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

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

น่าเสียดายนี่ใช้งานได้สำหรับการจัดกึ่งกลางแนวนอนเท่านั้นเนื่องจากการคำนวณเปอร์เซ็นต์มาร์จิ้นจะสัมพันธ์กับความกว้างเสมอ เช่นไม่เพียงmargin-leftและmargin-rightแต่ยังmargin-topและmargin-bottomมีการคำนวณด้วยความเคารพต่อความกว้าง

ความเข้ากันได้ของเบราว์เซอร์จะไม่มีปัญหา: https://caniuse.com/#feat=transforms2d

วาง div ขนาดใหญ่ไว้ใน div จัดกึ่งกลางนั้นและจัดกึ่งกลางของภาพภายใน div นั้น

ศูนย์นี้อยู่ในแนวนอน:

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

การสาธิต: http://jsfiddle.net/Guffa/L9BnL/

หากต้องการจัดกึ่งกลางภาพในแนวตั้งด้วยคุณสามารถใช้ปุ่มเดียวกันสำหรับ div ด้านใน แต่คุณจะต้องมีความสูงของภาพเพื่อวางไว้ด้านใน

มาถึงช่วงท้ายเกม แต่ฉันพบว่าวิธีนี้ใช้งานง่ายมาก 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>

อย่าใช้ความกว้างคงที่หรือความสูงที่แน่นอนกับแท็กรูปภาพ รหัสแทนมัน:

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

เช่นhttp://jsfiddle.net/xwrvxser/1/

ฉันเป็นแฟนตัวยงของการสร้างภาพพื้นหลังของ div / node - จากนั้นคุณสามารถใช้background-position: centerคุณลักษณะเพื่อจัดกึ่งกลางโดยไม่คำนึงถึงขนาดของหน้าจอ

ความกว้างและความสูงเป็นเพียงตัวอย่าง:

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

มันจะต้องทำงานให้กับคุณถ้าด้านซ้ายและด้านบนของ div หลักของคุณไม่ใช่ด้านบนและด้านซ้ายของหน้าต่างหน้าจอของคุณ มันใช้งานได้สำหรับฉัน

ฉันพบว่าสิ่งนี้เป็นโซลูชันที่หรูหรากว่าโดยไม่ต้องงอ:

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

คำตอบที่ยอดเยี่ยมของ @yunzen

ฉันเดาว่าหลายคนกำลังค้นหาหัวข้อนี้กำลังพยายามใช้ภาพขนาดใหญ่เป็นภาพพื้นหลัง "ฮีโร่" เช่นในหน้าแรก ในกรณีนี้พวกเขามักจะต้องการให้ข้อความปรากฏบนภาพและทำให้ขนาดบนอุปกรณ์เคลื่อนที่ดีขึ้น

นี่คือ CSS ที่สมบูรณ์แบบสำหรับภาพพื้นหลัง (ใช้บน<img>แท็ก):

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

ทางเลือกหนึ่งที่คุณสามารถใช้ได้คือobject-fit: coverมันมีพฤติกรรมเช่นbackground-size: coverนี้เล็กน้อย เพิ่มเติมเกี่ยวกับวัตถุพอดี

ไม่สนใจ JS ทั้งหมดด้านล่างนั่นเป็นเพียงการสาธิต

กุญแจสำคัญในที่นี้คือคุณต้องตั้งค่ารูปภาพภายใน wrapper และให้คุณสมบัติดังต่อไปนี้

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

ฉันได้สร้างตัวอย่างด้านล่างที่คุณเปลี่ยนความสูง / ความกว้างของเสื้อคลุมและดูในการเล่น ภาพจะอยู่กึ่งกลางในแนวตั้งและแนวนอนเสมอ จะใช้ความกว้างและความสูงของพาเรนต์ 100% และจะไม่ถูกยืด / แบน ซึ่งหมายความว่าจะคงไว้ซึ่งอัตราส่วนภาพของภาพ การเปลี่ยนแปลงจะถูกนำไปใช้โดยการซูมเข้า / ออกแทน

ข้อเสียเพียงอย่างเดียวobject-fitคือมันไม่ทำงานบน 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>