[CSS] div를 이미지 크기에 맞게 둘러싸기

이미지를 둘러싸는 Div가 이미지에 맞게 크기가 조정되도록 하고자 하는 경우에 사용할 수 있습니다.  이처럼 외부의 div가 안쪽의 이미지에 맞게 둘러싸도록 하려면 display: inline-block을 text-align: center를 함께 사용해야 합니다.

다음과 같은 코드를 사용할 수 있습니다.

HTML 코드:

<div class="imageContainer">
<div>
<img src=".." />
<span>...caption...</span>
</div>
</div>

CSS 코드:

.imageContainer {
text-align: center;
}
.imageContainer img {
display: block;
}
.imageContainer div {
position: relative;
display: inline-block;
*display: inline;
zoom: 1;
}
.imageContainer span {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: #000;
background: rgba(0,0,0,.5);
}
// Source: stackoverflow

jsfiddle에서 실제 작동을 확인할 수 있습니다.

div가 두 개 사용되었는데요, 바로 안쪽의 div가 그림 크기에 맞게 조정됩니다.