HI,
so our website has been rebuilt and i’ve noticed that pretty much every image has a class applied to it along the lines of
class="img-responsive"
Is this actually needed? When i code a website i tend to just specify that img{} and apply whenever to all images.
Is there a reason for adding a specific class?
thanks
That looks like code bloat to me. 
We would need to see the actual coding,though, to provide a positive answer. 
coothead
that’s what i am thinking but i just wanted to check there wasn’t a specific reason. This is our website https://www.mcsuk.org/ and if you look at the source you’ll see it littered with this class.
From what i can see all it does is
display: block; max-width: 100%; height: auto;
seems entirely pointless to add a class to all images just to do that when it can just be applied using the native img tag.
Is this a default bootstrap thing?
thanks
That is totally dependent on the design objectives and of course on what rules are applied to your responsive class.
It would seem unlikely that you would want all images in a site to be responsive especially icons and the like or small images that don’t need t grow and shrink.
However if you find that you do have the class on every image then a global rule would have been easier and then you could just class the exceptions.
You could apply that globally without too much problem and just add classes when you want the images inline.
The code doesn’t actually make the images responsive it makes them their default size unless the container is smaller than the image and then it shrinks them.
Oh dear me, Bootstrap or as deathshadow refers to it…
…seems to be a law unto itself. 
As I don’t wish to further irritate afficinados , I will say no more. 
coothead
The more i look at it the more i agree with you. I am sure it has it’s place but i’d rather than place was nowhere near me.
I know i shouldn’t be obsessed with ultra minimal code but our site is so bloated these days and i can’t see a genuine reason for it.
thanks all.
I have done similar, applying two of those rules to the img tag, avoiding the need for classes. Seems sensible to be and don’t see any harm in it.
img {
max-width: 100%;
height: auto;
}
I don’t have display: block in there because some images, such as icons should remain inline.
I can’t think of many instances where you would want an image to overflow its container. In any such rare instance, then a class class be called for.
So why doesn’t Bootstrap put it on the img tag?
The cynic in me can’t help thinking this is all part of the Bootstrap kidology, duping people into thinking RWD is really hard without using their “clever” framework. But with it, it’s so easy: apply this class, then your images will magically become totally responsive.
When the truth is all you need is the tiny snipped of code I posted above in the css, then some less bloated html.
You missed the point I was making and a fully responsive image expands up and down with the container. A max width image on the other hand does not scale up when the container is larger than the image’s intrinsic width.
Whether or not you want small images to scale smaller so that they become invisible is a design decision but generally I would not want small images to keep scaling smaller but rather have the container held open at their width. They would never overflow the container in my world as I tend not to size elements in fixed percentage widths.
I generally set my images to display: block by default but I like to add other rules on a case by case basis. I am of the opinion that undoing styles is basically bad practice and it is much better to add rules via a class than to unset global rules.
But as I said previously it all depends on the design in hand so sometimes I will do what’s best for the design which may be to set a few consistent gllobal rules.
I can tell you that the hardest jobs I’ve tackled have been the ones where the css was tightly coupled to the html and would have been a million times easier if a few extra classes had been used. I used to be the one telling everyone else not to use classes but experience on many large sites has changed my view. 
That’s something I generally avoid. I don’t like to see images get blown up beyond their actual size. That’s my reason for max-width:100% as opposed to width:100%.
I guess it’s a difference in how you define a responsive image. I think of it as just one that’s not ever going to spill off the side of the screen, as opposed to one that’s constantly adapting to every change in the screen size.
Here I think we do have wires crossed. I’m not sure about why you mention small images. I see that code as inert to small images, as they never get squeezed by the screen sides.
The bit about images overflowing, I’m talking about the default behaviour of images, where if it’s 800px wide, it stays 800px wide, even on a 320px screen. My point was: you don’t really want that to happen, so IMO it’s quite safe to apply max-width: 100% globally to images so it’s never going to be a concern. Then height: auto goes without saying you want to keep correct aspect. Then in the very rare instance that I want some other behaviour, then I would create a class to cater for that.
I accept the idea that global styles or class-dodging can cause a headache in some cases, but I see this one as a fairly safe bet where a class is redundant, or look at it as changing the default behaviour of images to something more conducive to responsive design.
Yes, the chances are most images, or their container will still want a class applying, but it’s also likely I’m going to want to repeat those same two lines for those classes, so I just get them out of the way from the off.
I’ve not had nearly as much experience as you and for most of my work I have had the luxury of being the sole coder with control over everything, so have not gotten caught up in that.
But more recently I started a job where I’m working on a site (both front and back-end) built by someone else, and it’s not much fun trying make sense of another’s code and put things in order, though not much of that has been css related.
Yes its often swings and roundabouts and sometimes its just a matter of preference or something that suits the way you work. I try to say “never do this” because I often get caught out later when I do it myself
This is a great article about selectors and worth a read.
If this is the same site?
Website design has changed since the site was first registered and wonder just how many incremental changes have been applied:
PREDomain Name: MCSUK.ORG
Registry Domain ID: D10538287-LROR
Registrar WHOIS Server: whois.tucows.com
Registrar URL: http://www.tucows.com
Updated Date: 2017-09-25T07:54:25Z
Creation Date: 1999-09-22T13:18:48Z
Registry Expiry Date: 2018-09-22T13:18:48Z
http://betterwhois.com/bwhois.cgi?domain=www.mcsuk.org&x=68&y=18
Edit:
Some interesting points there.
Since the site is built with Bootstrap, then I suppose the thing to do (assuming it’s staying a Bootstrap site) is to continue following the rules and conventions of the framework, even if they seem a bit backward.
When you are not using a framework, that’s when you have the freedom to do things the way you think is right. Though there is I think still scope for adding your own custom css.
My take is that apps (such as WordPress) add “every class attribute value possible” to make it easier for non-tech-savvy users to target elements. How useful they all are for someone that does know how to target elements is debatable.
As SamA47 mentioned, if other code is reliant upon those values being there it would be a good idea to leave them be even if they do add bloat.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.