How to fit an image inside a Bootstrap 3 div?

前端 未结 3 1613
说谎
说谎 2021-02-19 13:27

I am using a div tag in code as shown below:

相关标签:
3条回答
  • 2021-02-19 14:06

    It is safe to assume that by fitting you mean covering all of the width. This is because

    1. You typically do not know the height just by using col-sm-6 or col-md-6 or col-lg-4.
    2. There is a huge probability of loss in aspect ratio of the image if you try to resize it according to your own will.

    Use <img src = "images/dummy_image.png" class = "img-responsive" width = "100%" /> for fitting the column. This will fit your image width-wise into the column and will automatically modify the height (keeping the aspect ratio in mind), so you do not have to worry about image getting illogically resized.

    0 讨论(0)
  • 2021-02-19 14:12

    Just add you images width to 100%.

    But as you are saying user will upload various kind of images, so can use object-fit property.

    Add the CSS like this:

    .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>
    

    You will find the details about object-fit and object-position here : https://css-tricks.com/on-object-fit-and-object-position/

    0 讨论(0)
  • 2021-02-19 14:13

    For Bootstrap 4

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

    bootstrap.css

    .img-fluid {
      max-width: 100%;
      height: auto
    }
    
    0 讨论(0)
提交回复
热议问题