[CSS] divを画像サイズに合わせて囲む

Last Updated:2019年11月24日| , コメントを残す

画像を囲むDivがイメージに合わせてサイズが調整されるようにしたい場合に使用することができます。 このように、外部のdivが内側のイメージに合わせて囲むようにするには、 display:inline-blocktext-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が画像のサイズに合わせて調整されます。


コメントを残す

コメント