Sometimes CSS classes do not work in img tag. But why?

HTML & CSS
1

I’m using thumbnail and caption classes of bootstrap. But all my images are not of the same size. To make their size equal I added this in my img tag and it works perfectly making all the thumbnails equal

style="height:150px;width:150px;object-fit:cover;overflow:hidden;>"

But if I put the same style in a class and add that, the changes do not appear. Here’s what I have tried:

<img src="{{ episode.villain_pic }}" class="img-responsive pic-resize">

and the class is like this:

.pic-resize{
    height:150px;
    width:150px;
    object-fit:cover;
    overflow:hidden;
}

Here’s My full HTML code of that page. I used Django with it.

  <div class="container">

       <h1 class="season_title">Season {{season.id}}</h1><br><br>


       {% for episode in season.episode_set.all %}

           <div class="col-sm-4">
               <div class="thumbnail">
                   <img src="{{ episode.villain_pic }}" class="img-responsive pic-resize">

                   <div class="caption">
                       <h3 class="my-font" >Episode {{ episode.id }} : {{ episode.title }}</h3>

                       <h4 class="my-font"> Release Date: {{ episode.release_date }}</h4>

                       <a href="{{ episode.video_link }}" class="btn btn-danger">
                           Watch On Youtube
                       </a>
                   </div>
               </div>

           </div>
       {% endfor %}
   </div>

I think it’s not a good option to use inline styles.
So could you please tell me what i should do?

2

I imagine there is a more specific selector within Bootstrap which is overriding your own class.

Use Inspect in your browser to identify which selectors are styling the images.

4 Likes
3

As Sam said you need to get friendly with your web inspector and find out the weight of the rules that over-ride your own and then match with a similar weight.

e.g.

You may have to do something like this:

img.img-responsive.pic-resize{
styles here etc ...
}

It may be that you have rules using the thumbnail class so you may have to add more weight.

e.g.

.thumbnail img.img-responsive.pic-resize{
styles here etc ...
}
1 Like
4

After inspecting I found this.The height was set to auto and the max-width was 100%. That’s why it was overwriting my class.

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
    display: block;
    max-width: 100%;
    height: auto;
}

So I just copied the whole thing and changed it. I added this in my style sheet.


.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
    height:150px;
    width:150px;
    object-fit:cover;
    overflow:hidden;
}

Please let me know if I made any silly mistake.

But the best thing is that it’s working just the way I wanted. Thanks for helping this beginner guy.

5

I don’t know Bootstrap well at all, but I believe those are the css properties assigned to the class .img-responsive in Bootstrap.
So simply removing that class form the image may be a simpler and more effective solution.

2 Likes
6

I tried removing the img-responsive class but it didn’t work.
Maybe because the img tag is inside the .thumbnail class. And height was set to auto in .thumbnail>img.

To make my CSS code shorter, I replaced that long part with this code to overwrite the .thumbnail>img part only. It’s working. :innocent:

.thumbnail>img {
    height: 150px;
    width: 150px;
    object-fit: cover;
    overflow: hidden;
}
2 Likes
7

The inspector should show you which classes are actively influencing the properties. Though removing one class may just give way to another class.

3 Likes
8

Yes removing the img-responsive class will have no effect in this case because the image is targeted directly via a descendant selector.

You could have used the code I gave you originally to avoid upsetting any other use cases but you are probably ok with what you have now.

1 Like
9

Actually I wanted to get rid of the pic-resize class in my img tag. That’s why I edited the bootstrap class. :slight_smile:

10

Fatal mistake I’m afraid.:slight_smile:

The first rule of bootstrap is not to directly change the source code. Generally you should make changes via your custom CSS using over-rides otherwise you risk breaking the whole framework or being unable to update at a later date. Bootstrap classes are used site-wide and have expected behaviours and if you change the core class then you change it everywhere and unless you have taken into account all the implications of that class, which may pass through multiple media queries, then you could end up in trouble.

For example your first attempt would likely have broken any carousels that may have been introduced because the rule was being used for those.

By setting all images to 150px width and height you have killed any responsiveness and now images in that region will not shrink or grow. This may be OK in isolation but in the concept of a framework you have just broken a number of golden rules:). Much better to add a unique class for this situation and to use in similar situations and avoid breaking the framework.

When you use a framework you should follow its guidelines otherwise you may as well roll your own to start with :slight_smile:

5 Likes
11

I got it. I’d rather try the solution you gave.
I’m new to web-designing. Besides I’m just a kid. I hope I’ll be concerned about the rules gradually.

Here’s what I’ve done this time:

.thumbnail img.pic-resize{
    height:150px;
    width:150px;
    object-fit:cover;
    overflow:hidden;
}


 <div class="thumbnail">
     <!--removed the img-responsive class -->
    <img src="{{ episode.villain_pic }}" class="pic-resize">

    <div class="caption">
        <h3 class="my-font" >Episode {{ episode.id }} : </h3>
        <h3 class="my-font-red">{{ episode.title }}</h3>

        <h3 class="my-font">Release Date:</h3>
        <h3 class="my-font-red">{{ episode.release_date }}</h3>

        <a href="{{ episode.video_link }}" class="btn btn-danger">
            Watch On Youtube
        </a>
    </div>
</div>

Hope it’s good to go :slight_smile:

3 Likes
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.