오버플로가있는 div의 가운데 이미지 세로가 숨김

이것이 고전적인 도구라고 생각합니다. 비슷한 질문을 많이했지만 답이 없습니다.오버플로가있는 div의 가운데 이미지 세로가 숨김

.outer { 
    padding-top:49px; 
    height:49px; 
    width:280px; 
    overflow:hidden; 
    background-color:yellow; 
} 
.outer .inner { 
    float:left; 
    position:relative; 
    display:block; 
    background-color:blue; 
} 
.outer .inner img { 
    position:relative; 
    top:-50%; 
    width:280px; 
    height:auto; 
    border:0px; 
    display:block; 
}

는 그래서 .inner가의 중심으로 밀어 :

나는이 내가 지금 무엇을 가지고 overflow:hidden

와 사업부에 수직 중심에있는하지 알려진 높이의 이미지를 원하는 은 padding-top이므로 2 x 49px = 98px 높이의 "창"을 얻습니다. 그렇다면 img 나는 .inner 높이에서 50 %를 밀어 낼 것이라고 생각했지만 어떤 이유로 나는 다른 숫자를 얻었습니다. ...

내가 뭘 잘못하고 있는지 아는 사람이 있습니까?

미리 감사드립니다.

출처

2013-03-27 Joep

당신이 스크린 샷 또는 JS 바이올린을 제공 할 수 있도록 우리가 무슨 잘못 시각적으로 볼 수 있습니까? – Michael

나는 JS Fiddle (바깥 쪽의 높이를 뚫고 오른쪽으로 이미지를 밀어 넣었습니다)을 만들었지 만 50 % 이미지를 밀어 내지는 못합니다. 나는 screendump를 추가 할 것입니다. http://jsfiddle.net/joepdooper/3NSP8/ – Joep

이미지가 img 태그에 머무르거나 CSS의 배경 이미지가 될 수있는 것이 절대적으로 필요합니까? – Michael

비슷한 상황에 직면하여 다른 접근 방식으로 해결했습니다. 저는 div의 배경 이미지로 이미지를 사용했습니다. 코드 샘플

<head> 
    <style> 
     div.imgbox1{ 
      width: 160px; 
      height: 110px; 
      overflow: hidden; 
      background-position: 50% 50%; /* for vertical and horizontal center alignment*/ 
     } 
    </style> 
</head> 

<body> 
    <div class='imgbox1' style="background-image: url(http://photos-h.ak.fbcdn.net/hphotos-ak-snc6/399232_10151118743727680_899168759_a.jpg)" > 
    </div> 
</body>

img 태그를 사용하는 것이 아닌 경우 먼저이

출처

2013-03-27 14:17:26

감사합니다 Afzal,하지만 alt 텍스트와 html로 이미지를 배치하는 복잡한 jquery의 사랑에 대한 img를 유지하기를 바라고 있습니다. – Joep

먼저 일을 시도 할 수 있어야합니다 ... 당신이 얻고있는 결과를 얻는 이유에 대한 설명. 이것은 아주 간단합니다. position: relative; (또는이 경우 절대 값)을 설정 한 다음 top: 50%;을 설정하면 이미지의 맨 위쪽이 50 %로 정렬됩니다. 이미지의 높이를 1 픽셀로 설정하면 1 픽셀이 가운데에 맞춰집니다. 안타깝게도 CSS가 위쪽 가장자리가 아닌 이미지 중심에 맞춰야한다고 말하는 방법은 없습니다. 당신은 이미지가 여백을 통해 내부 DIV의 높이를 결정 할 수 있도록 고려했다 ... 지금 가능한 솔루션

...

, 아무 것도이 .inner DIV 내부 않을 것을 가정하면?

예 : this JSFiddle.

여백 왼쪽과 오른쪽을 자동으로 설정하고 위쪽과 아래쪽 여백을 일부 px 값으로 설정하여 .inner div 안에 이미지를 "가운데에 맞출"수 있습니다. 예를 들어 60 픽셀입니다.

총 div 높이 600px를 얻고 이미지의 높이가 항상 400px 인 경우 100px의 여백 위쪽과 아래쪽에서 총 높이 600px가됩니다. (400 + 100 + 100 = 600).

HTML :

<div class="outer"> 
    <div class="inner"> 
     <img src="http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg"> 
    </div> 
</div>

CSS :

.outer { 
    height:520px; 
    width:520px; 
    overflow:hidden; 
    background-color:yellow; 
    border: 2px solid purple; 
} 
.outer .inner { 
    width: 340px; 
    display:block; 
    background-color:blue; 
    border: 1px solid red; 
    padding: 10px; 
    margin: 0 auto; 
} 
.outer .inner img { 
    width:280px; 
    height:auto; 
    margin: 60px auto; 
    border:0px; 
    display:block; 
    border: 1px solid orange; 
}

두 번째 가능한 솔루션 ...

가 <img> 태그가 연구 할 필요가 없습니다 것을 가정 emay <img> 태그를 사용하는 경우 이미지를 CSS로 이동하는 것이 매우 간단합니다 ( background-image).

이 솔루션의 데모는 JSFiddle을 참조하십시오.

HTML :

<div class="inner"> 
</div>

CSS :

.inner { 
    width: 540px; 
    height: 340px; 
    display:block; 
    background-color:blue; 
    border: 1px solid red; 
    margin: 0 auto; 
    background: blue url('http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg') no-repeat 50% 50%; 
}

출처

2013-03-27 15:03:16 Michael

마이클 감사합니다. 당신의 솔루션을 이해합니다. 문제는 각 이미지의 높이가 무엇인지, 그리고 이미지가 잘리는 지 절대 알지 못한다는 것입니다. JSFiddle의 내 버전과 달리이 페이지의 제 질문에서 설명한 것처럼 내 이미지는 .outer div로 오버플로 : 숨겨진 높이 크기. – Joep

이미지를 CSS로 배경 이미지로 옮길 수 없다면 내가 원하는 방식대로이 작업을 수행하는 유일한 방법은 자바 스크립트를 사용하는 것이며 불행히도 자바 스크립트를 모른다는 것입니다. – Michael

오버플로가있는 div의 가운데 이미지 세로가 숨김

답변

관련 문제