Style works depending on the html element, why?

Style works depending on the html element, why?
0.0 0

#1

Please take a look at this test page:

I’m using image-responsive from bootstrap to make the image fit the window width, and I’m using a css class to get rid of the margins. The css class is on a div and the image-responsive is on the image element itself.

However, if move the “image-responsive” from the “img” to the “div”, it stops working. Similarly, if I move the “no-margin” from the “div” to the “img”, it also stops working.

I would like to understand why that happens.


#2

It’s important to see how each of these classes work. Let’s look at the source code:

.img-responsive(@display: block) {
  display: @display;
  max-width: 100%; // Part 1: Set a maximum relative to the parent
  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}

We can ignore the foreign looking LESS syntax and focus on the CSS. Take a look at the two comments - they’re from the Bootstrap devs, not me. If you put that on the div, you’re telling it to expand to, at most, 100% of its parent width and to set its height automatically.

image elements, by default, do not scale to their parent’s dimensions. So, when we take the responsive class away, it doesn’t know that it should resize.


#3

Hmm I see. What about putting “no-margin” on the image element?


#4

@linck5 you asked why it works that way, not how to solve it. Are you asking how to solve it, because it looks like you have a satisfactory outcome now? Also if you are unsatisfied it would be helpful to know what you are trying to achieve, so we can tell you if no-margin is in fact the best solution. :slight_smile:


#5

@linck5 I have noticed the same thing, and I, too, wondered why that was. If I understand @PortableStick correctly, it’s a matter of parent vs. child element, with a dash of giving the directions to the element capable of carrying them out?

For example, if the floor needs mopped in an office building, you don’t go to the accounting department, you talk to the janitorial crew. Likewise, if you need an expense report, the janitors aren’t going to be too helpful (okay, they could be, but they’d need information they likely don’t have access to in the broom closet).

@PortableStick, do I have this right, or am I still missing something? And thanks for taking the time to explain.
Regards,
Descadora


#6

@misterhtmlcss I want to know how it works. In the test pen I linked what I was trying to achieve was achieved already, which is have an image fit the screen using bootstrap’s image-responsive class, and have the image have no margins on the sides.

So to clarify, I have basically asked two questions:
1- why it doesn’t work if I put the class img-responsive on the div element instead of the img? This question is answered already by PortableStick. It’s because this will make the div fit the screen, but not the image inside the div, because “mage elements, by default, do not scale to their parent’s dimensions.”.

2- why it doesn’t work if I put the class no-margin on the img element instead of the div? This question at least for me remains unanswered. I’m not sure why that happens yet. I know that the image would have -15 margin in relation to its parent, the div, instead of the div having no margin in relation to its own partent, the other div. But I don’t see why this would change the effect.

@descadora Sorry but I didn’t quite get what you mean with your analogy.


#7

I don’t actually understand what you’re asking here. Your no-margin class very much has an effect on the image.

I think you have the right idea, but it’s more general than an “element capable of carrying [instructions] out”. It’s not that there’s something special about img tags when it comes to sizing, but it’s one of the only times we have to deal with a child element overfilling its parent. I made a quick pen to demonstrate the difference with images as well as colored blocks.

http://codepen.io/PortableStick/full/ZLaOzB/


#8

@PortableStick I made a pen to illustrate:


#9

In the second example, you’re taking the margin off of the image. The gap on the right is because the img-responsive class makes the image be the same width as its parent, but you’ve moved it to the left with a margin of -15px. Giving an image negative margins does not stretch the image.


#10

Oh that makes sense! I understand now, thank you very much.


#11

Way better question. Way better answer.

I love reading the comments from a well conceived question, because I always learn too :slight_smile:

Thanks for sharing!