Div의 중앙 대형 이미지

CSS 만 사용하여 div 내에서 대형 이미지를 가운데에 배치하는 방법을 정렬하려고했습니다.

유동적 인 레이아웃을 사용하고 있으므로 이미지 컨테이너의 너비는 페이지 너비에 따라 달라집니다 (div의 높이는 고정되어 있음). 이미지는 페이지에서 페이지를 보는 것처럼 보이도록 삽입 상자 그림자가있는 div 안에 있습니다.

이미지 자체는 가능한 가장 넓은 값 (디자인에 max-width값이 있음)으로 주변 div를 채우도록 크기가 조정되었습니다 .

이미지가 주변 div보다 작은 경우 매우 쉽습니다.

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

그러나 이미지가 div보다 크면 왼쪽 가장자리에서 시작하여 오른쪽 중앙에서 벗어납니다 (우리는 사용 중입니다 overflow: hidden).

우리는을 할당 할 수 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를 넣고 가운데에 이미지를 중앙에 배치하십시오.

가로로 가운데에 배치됩니다.

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. object-fit 에 대한 추가 정보 .

아래의 모든 JS는 무시하십시오. 데모 용입니다.

여기서 핵심은 래퍼 내부에 이미지를 설정하고 다음 속성을 제공해야한다는 것입니다.

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