CODEWITHSUNDEEP
cssimagetwitter-bootstraptwitter-bootstrap-3
JackTheKnife
JackTheKnife

Reputation: 4144

Images not resized based on Bootstrap column size

My goal is to display 4 images per row. Code below:

<div class="row">
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>                                                                                    
</div>

And I expect too see images resized based on column style from Bootstrap, but what I'm getting are overlapping full images .

Any clue what is going on?

Upvotes: 59

Views: 105260

Answers (7)

carloswm85
carloswm85

Reputation: 2382

General solution for Bootstrap 5. And I'm adding a particular solution to OP's problem at the end of my answer.

Resizing seems not to be an easy task on some situations. I haven't found any built-in implementation in BS5 for specific image resizing using Bootstrap classes.

The best solution I've found is handling images as they were any other HTML element (a span or a div element).

GENERAL SOLUTION

Use this snippet

<img
    src="~/Content/images/YourImage.jpg"
    class="img-fluid mx-auto mx-lg-0 h-100 col-8 col-sm-6 col-md-4 col-lg-1 my-auto"
>

NOTE: This is just a general example. Adapt it to your needs.

Explanation (more or less this is what happens)

  1. BASIC SET UP (for Bootstrap responsive image):
    • img-fluid: Image is made responsive. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent width.
    • mx-auto: centers the image in the horizontal axis, for phone views. Left and right margins are set to auto
    • mx-lg-0: When the lg break-point is reached, the margin to both sides are set to 0.
  2. USING COLUMNS (resize to your needs):
    • h-100: Image height is set to 100% relative to the parent. This should preserve the correct aspect ratio.
    • col-8: At the smallest screen size, image will occupy 8 columns.
    • col-sm-6: After the small screen break point (see links at the section below), image will occupy 6 columns.
    • col-md-4: At mid sized screens, 4 columns.
    • col-lg-1: At large sized screens, 1 column.
    • my-auto: This is for vertical centering (optional).

Remember, you'll set the columns occupied at your own will and pleasure.

Result

Alligator

SOLUTION FOR THIS QUESTION

The main problem with your code is that you're missing classes. Remember: Bootstrap is mostly about using classes correctly. You should think twice if you're using the built-in classes correctly before putting in your own CSS code.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex gap-2">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
</div>

For responsiveness on different screen sizes, take a look to the general solution above.

Links

Upvotes: 2

Clement Borisov
Clement Borisov

Reputation: 1

The solution to this is to use the <picture> and the <source> tags. Just make sure you have different sizes of your image prepared for various screens.

https://www.w3schools.com/tags/att_source_media.asp

Upvotes: 0

henrywright
henrywright

Reputation: 10240

Try adding this to your stylesheet:

img {
    width: 100%;
}

Update: As an alternative (as pointed out in this answer's comments by @JasonAller), you could add class="img-responsive" to each img element. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element. See the Bootstrap docs for more info.

update for bootstrap v4

The classname for bootstrap v4 is img-fluid
Bootstrap v4 docs

Upvotes: 132

Juano
Juano

Reputation: 776

If you want, you can use the width tag in the html element, for example:

    <img width="60%" src="...">

I find it more useful, since you can play with the percentage until you have the desired size.

Upvotes: 0

Katia Punter
Katia Punter

Reputation: 302

Beware that bootstrap columns have padding as well; that may be unexpected.

The following:

div class="col-sm-6" style="padding:0"

worked for me.

Upvotes: 2

Ray Koren
Ray Koren

Reputation: 864

With Bootstrap 4 you must use use class="img-fluid", class="img-responsive" will work in 3.x.

Upvotes: 27

Nookeen
Nookeen

Reputation: 465

Sometimes on dynamic content when you have no control over what users put in, class="img-responsive" would not work. And 'width: 100%' for each image is tricky as well. So I am using:

img {max-width: 100%;}

Upvotes: 7

Related Questions