CSS 솔루션 JS 및 배경 이미지 없음 :
방법 1 "여백 자동"(IE8 +-NOT FF!) :
div{
width:150px;
height:100px;
position:relative;
overflow:hidden;
}
div img{
position:absolute;
top:0;
bottom:0;
margin: auto;
width:100%;
}
<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<p>Wrapped:</p>
<div>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
http://jsfiddle.net/5xjr05dt/
방법 2 "변환"(IE9 +) :
div{
width:150px;
height:100px;
position:relative;
overflow:hidden;
}
div img{
position:absolute;
width:100%;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<p>Wrapped:</p>
<div>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
http://jsfiddle.net/5xjr05dt/1/
방법 2를 사용하여 고정 너비 / 높이 컨테이너에 이미지를 중앙에 배치 할 수 있습니다. 둘 다 넘칠 수 있습니다-이미지가 컨테이너보다 작 으면 여전히 중앙에 위치합니다.
http://jsfiddle.net/5xjr05dt/3/
방법 3 "이중 래퍼"(IE8 +-NOT FF!) :
.outer{
width:150px;
height:100px;
margin: 200px auto; /* just for example */
border: 1px solid red; /* just for example */
/* overflow: hidden; */ /* TURN THIS ON */
position: relative;
}
.inner {
border: 1px solid green; /* just for example */
position: absolute;
top: 0;
bottom: 0;
margin: auto;
display: table;
left: 50%;
}
.inner img {
display: block;
border: 1px solid blue; /* just for example */
position: relative;
right: 50%;
opacity: .5; /* just for example */
}
<div class="outer">
<div class="inner">
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
</div>
http://jsfiddle.net/5xjr05dt/5/
방법 4 "이중 래퍼 및 이중 이미지"(IE8 +) :
.outer{
width:150px;
height:100px;
margin: 200px auto; /* just for example */
border: 1px solid red; /* just for example */
/* overflow: hidden; */ /* TURN THIS ON */
position: relative;
}
.inner {
border: 1px solid green; /* just for example */
position: absolute;
top: 50%;
bottom: 0;
display: table;
left: 50%;
}
.inner .real_image {
display: block;
border: 1px solid blue; /* just for example */
position: absolute;
bottom: 50%;
right: 50%;
opacity: .5; /* just for example */
}
.inner .placeholder_image{
opacity: 0.1; /* should be 0 */
}
<div class="outer">
<div class="inner">
<img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<img class="placeholder_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
</div>
http://jsfiddle.net/5xjr05dt/26/
- 방법 1은 약간 더 나은 지원을 제공합니다-이미지의 너비 또는 높이를 설정해야합니다!
- 접두사를 사용하면 방법 2도 괜찮은 지원을합니다 (ie9 이상). 방법 2는 Opera mini를 지원하지 않습니다!
- 방법 3은 두 개의 래퍼를 사용합니다. 너비와 높이가 오버플로 될 수 있습니다.
- 방법 4는 이중 이미지 (하나는 자리 표시 자)를 사용하여 추가 대역폭 오버 헤드를 제공하지만 더 나은 크로스 브라우저 지원을 제공합니다.
방법 1과 3이 Firefox에서 작동하지 않는 것 같습니다
width하고height그에 따라 조정한다