web-dev-qa-db-ja.com

bootstrap div内に画像を収める方法は？

以下のようにdivを使用しています

<div class="col-sm-6 col-md-6 col-lg-4">
<img src="images/dummy_image.png" class="img-responsive">
</div>

ユーザーはあらゆる種類の画像をアップロードします。したがって、div内に画像を収める必要があります。つまり、画像を使用してdiv全体をカバーする必要があります。bootstrapを使用しています）.

htmlcsstwitter-bootstrapuser-interfaceweb
6
user1770268

画像の幅を100％に追加するだけです。

しかし、ユーザーがさまざまな種類の画像をアップロードするので、object-fitプロパティを使用できます。

次のようにCSSを追加します。

.fit-image{
width: 100%;
object-fit: cover;
height: 300px; /* only if you want fixed height */
}

<div class="col-sm-6 col-md-6 col-lg-4">
<img src="images/dummy_image.png" class="img-responsive fit-image">
</div>

object-fitとobject-positionの詳細については、こちらをご覧ください： https://css-tricks.com/on-object-fit-and-object-position/

14
Zahidul Islam Ruhel

Bootstrap 4ユーザーの場合これは機能します

<div class="col-sm-6 col-md-6 col-lg-4">
    <img src="images/dummy_image.png" class="img-fluid">
</div>
7
Dawit Abraham

fittingと指定すると、幅全体をカバーすることになります。それの訳は

  1. 通常、col-sm-6またはcol-md-6またはcol-lg-4を使用しても、高さがわかりません。
  2. 自分の意志に従ってサイズを変更しようとすると、画像のアスペクト比が失われる可能性が非常に高くなります。

列を合わせるには<img src = "images/dummy_image.png" class = "img-responsive" width = "100%" />を使用します。これは画像を幅方向に列に合わせ、高さを自動的に変更します（アスペクト比を考慮して）ので、画像が不自然にサイズ変更されることを心配する必要はありません。

0
Pranav Totla