ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2019年11月24日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

画像を囲む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が画像のサイズに合わせて調整されます。



コメントを残す

コメント