Log in / Register

Forum › Bugs

img:before breaks max-width

Johann
I received the request to replicate the Word function 'Line Numbers' for our generated documents.
That can be done with the help of sidenotes, at least for elements like paragraphs, table rows and images.

But I encountered the following problem: The selector "img:before" breaks the "max-width" property of the image!

Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Image with Caption</title>
    <style>
        img:before {
            content: "This is a 10cm Circle";
            display: block;
        }
        img { display:block; max-width:5cm; }
    </style>
  </head>
  <body>
    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTBjbSIgaGVpZ2h0PSIxMGNtIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI1MCIgZmlsbD0iYmx1ZSIgLz4KPC9zdmc+Cg==" alt="10cm Circle"/>
  </body>
</html>


The setting "max-width: 5cm" for img is ignored in this case.

- - -
Johann

howcome
The SVG image you include explicitly says it's 10cm wide:

<svg width="10cm" height="10cm" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" fill="blue" />
</svg>


So, it will overflow its allotted width, which is 5cm (as per you setting on 'max-width'). You can hide the overflow by setting:

img { display:block; max-width:5cm; overflow: hidden }


So, 'max-width' is not ignored, but it has no saying on the overflow.
  1. foo.html‎ 0.6 kB
  2. foo.pdf‎ 18.1 kB

Edited by howcome

Johann
Then please explain why the image is scaled to 5cm when I remove the "img:before" rule :-)

- - -
Johann

howcome
Hmm. I don't understand why the SVG is presented differently with/without the generated element.
Johann
You invented CSS, who else should understand it?

- - -
Johann

howcome
Don't use that against me :--)

I think this is a Prince issue.

Hmm.