Why the image with display: block is beyond the scope of the parent unit?

0 like 0 dislike
Hello! Know the question is rhetorical and that images have a type. But sometimes do on the machine, and then wonder why. It's from the series or could I have signals )

The crux of the matter: there is a block c with a width of say 300px, the image c of a width of 340px. The image will go beyond the block, because it is a feature of the images. But why should the image set to display: block , it also goes beyond. Indeed, from the definition of the block element:

It occupies the entire available width of the browser window and the width of the block will equal 100%. You may want to put it inside the other, as the width of the inner tag of the starting point relative to its parent, i.e. the external container.

In this case, the image a block element inside a block container, why leaves?
Here for example!: https://jsfiddle.net/193x2jgc/
It is clear that width: 100%; for the image will all work, but why no width doesn't work, it's the 2nd block element?
Where is the truth? )
by | 6 views

2 Answers

0 like 0 dislike
All right, an abstract element with display: block by default has a width of 100%. But you clearly pointed out that it should have width 300px, not 100%.

For the image you specify display: block, but that same image, it has a native width obtained from the image, and she 340px.

But this was stretched by 100% https://jsfiddle.net/193x2jgc/1/
0 like 0 dislike
In short, ask image max-width: 100%; It will occupy the entire block, and will also be adaptive.
110,608 questions
257,186 answers
33,907 users