오버플로가 숨겨진 작은 div 안에 알 수없는 크기의 큰 이미지를 중앙에 배치

오버플로가 숨겨진 작은 div 안에 알 수없는 크기의 큰 이미지를 중앙에 배치

---

내가 사업부 내부 IMG을 중심 싶습니다 자바 스크립트없이 및 배경 - 이미지없이 .

다음은 몇 가지 예제 코드입니다.

<div> 
    <img src="/happy_cat.png"/> 
</div>

• img의 크기를 모르고 부모의 너비를 초과 할 수 있어야합니다.
• 부모 div의 너비를 모릅니다 (100 %)
• 상위 div의 높이가 고정되어 있습니다.
• 이미지가 상위보다 크고 상위에 overflow : hidden이 있습니다.
• 최신 브라우저 만 지원하면됩니다.

원하는 결과. (불투명도 등은 무시하고 위치 만 기록하십시오).

나는 이것이 배경 이미지로 쉽게 할 수 있다는 것을 알고 있지만 그것은 나에게 옵션이 아닙니다. 나는 또한 자바 스크립트를 사용할 수 있지만 이것을 달성하는 것은 매우 무거운 방법처럼 보입니다.

감사!

잭

---

이것에 대해 :

.img {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
}

이것은 부모 div가 상대적으로 위치한다고 가정합니다. .img를 절대적으로보다는 상대적으로 배치하려는 경우 이것이 작동한다고 생각합니다. 제거하고 position: absolute상단 / 왼쪽을 margin-top및로 변경 하십시오 margin-left.

transform, -moz-transform등으로 브라우저 지원을 추가하고 싶을 것입니다 .

---

이전 질문, 새로운 답변 :

이미지가 래핑 div보다 크면 text-align : center 또는 margin : auto가 작동하지 않습니다. 그러나 이미지가 더 작 으면 절대 위치 또는 음수 왼쪽 여백이있는 솔루션은 이상한 효과를 생성합니다.

따라서 이미지 크기가 실제로 사전에 알려지지 않았고 (예 : CSM에서) 래핑 div보다 크거나 작을 수있는 경우 모든 용도에 맞는 우아한 CSS3 솔루션이 있습니다.

div {
    display: flex;
    justify-content: center;
    height: 400px; /* or other desired height */
    overflow: hidden;
}
img {
    flex: none; /* keep aspect ratio */
}

스타일 시트의 다른 규칙에 따라 img에 width : auto 및 / 또는 max-width : none을 추가해야 할 수도 있습니다.

---

이것은 항상 약간 까다 롭고 많은 솔루션이 있습니다. 다음과 같은 최상의 솔루션을 찾습니다. 이것은 수직 및 수평으로 중앙에 배치됩니다.

CSS

#container {
    height: 400px;
    width: 400px;
}
.image {
    background: white;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.left {
    width: 100px;
    height: 100%;
    z-index: 2;
    background: white;
    top: 0px;
    position: absolute;
    left: 0px;
}
.right {
    width: 100px;
    height: 100%;
    z-index: 2;
    position: absolute;
    background: white;
    top: 0px;
    right: 0px;
}
.image img {
    margin: auto;
    display: block;
}

HTML

    <div id="container">
<div class="image">
    <div class="left"></div>
    <div class="right"></div>
    <img width="500" src="https://www.google.com.au/images/srpr/logo11w.png" />
</div>

바이올린 참조

약간 다른 기술 : Fiddle

---

여러분의 도움에 감사드립니다. 나는 CSS에서만 이것을 달성 할 수 없다고 생각할 것입니다.

jQuery 솔루션으로 이동하겠습니다. 여기에 관심있는 사람들을위한 [의사] 코드가 있습니다.

나는 CSS 솔루션을 포기하려고했지만 할 수있는 것처럼 보입니다 (허용 된 답변 참조). 여기 내가 함께 갈 JS 솔루션이 있습니다.

var $img = $('img'),
    w = $img.width();

$img.css({marginLeft: -w});

그리고 수반되는 CSS

img{
  position:absolute;
  left:50%;
}

---

나는 이것이 오래되었다는 것을 알고 있지만 위와 매우 유사한 순수한 CSS 솔루션을 생각해 냈습니다.

.parent {
    float: left;
    position: relative;
    width: 14.529%; // Adjust to your needs
}

.parent img {
    margin: auto;
    max-width: none; // this was needed for my particular instance
    position: absolute;
    top: 11px; right: -50%; bottom: 0; left: -50%;
    z-index: 0;
}

---

다음과 같이 이미지의 위치를 ​​초기화하십시오.

HTML :

<div> 
    <img id="img" src="/happy_cat.png"/> 
</div>

CSS :

#img {
    left: 0;
    right: 0;
}

또는 margin: auto;

수평 정렬 용입니다. 수직도를 정렬하려면, 당신은 할 수 있습니다 display: table-cell;당신에게 <div>다음 vertical-align: middle;하지만 당신의 beacause를 그것은 좋은 방법이 아닙니다의 <div>테이블이 아닙니다.

참고 URL : https://stackoverflow.com/questions/19673895/center-a-large-image-of-unknown-size-inside-a-smaller-div-with-overflow-hidden