Issue with image max-width

[mojimi]

All I'm trying to achieve here is a Bootstrap-like row/col behaviour where I have a table with equal width cells, and that images inside these cells stay inside the cells.

I've tried display : flex and display : table, but both seem to be ignoring the img's max-width style property.

I'm not sure what other way I could try to have the image fit it's parent in a table-like matter.

html :

<div class="row">
	<div class="col">Célula 1</div>
	<div class="col">Célula 2</div>
	<div class="col">Célula 3</div>
</div>
<div class="row">
	<div class="col">Célula 4</div>
	<div class="col">Célula 5</div>
	<div class="col">Célula 6</div>
</div>
<div class="row">
	<div class="col">Título 1</div>
</div>
<div class="row">
	<div class="col">
		<img src="someHugeImg">
	</div>
	<div class="col">
		<img src="someHugeImg">
	</div>
</div>

css :

.row{
  text-align:center;
  width: 100%;
  display: table;
	border: 1px solid black;
}
.row > .col {
	display: table-cell;
}
img{
	width: 100%;
}

Working as expected in JsFiddle : http://jsfiddle.net/ppgab/zm7Lahdj/8/

[liZe]

Hello!

I'm not sure to understand what you want, as I get the same result in WeasyPrint and in my browser.

Here's what I get in WeasyPrint:

And here's what I get in JsFiddle:

Is that what you want?

[Tontyna]

@mojimi what's your WeasyPrint version?

[mojimi]

@liZe YES! That's exactly what I'm trying to achieve! 😞 But the images just stay at their original size...

I'm using the latest version that comes with PIP, version 44 @Tontyna.

I'm on a Windows 10 64 bits using Python 3.6.8, no errors are shown in output.

And here's the py code

from weasyprint import HTML, CSS
html = HTML('./report.html', encoding="utf-8")
html.write_pdf('./test.pdf', stylesheets=['./css.css'])

[liZe]

That's exactly what I'm trying to achieve!

Well… That's already what I get with WeasyPrint 44 using the HTML and CSS from your JsFiddle 😉.

[mojimi]

That's exactly what I'm trying to achieve!

Well… That's already what I get with WeasyPrint 44 using the HTML and CSS from your JsFiddle 😉.

Aw man... Do you know anything I could try? What could it be? There has to be something different...

I'm also running in a python 3.6 virtualenv and the code is running on a Flask server if that changes anything

[Tontyna]

That's exactly what I'm trying to achieve!

... and what I get with WeasyPrint 44 on Windows 7

@liZe Is the downscaling delegated to Cairo?

If yes: @mojimi What's your Cairo version?

[mojimi]

@Tontyna the cairosvg python package is 2.2.1, the .dll in GTK3 i'm not sure how to check the version.

I just installed everything following the tutorial at the readthedocs documentation

[Tontyna]

Python snippet to get the Cairo version:

import cairocffi as cairo
print('Cairo:', cairo.cairo_version_string ())

[mojimi]

Python snippet to get the Cairo version:

import cairocffi as cairo
print('Cairo:', cairo.cairo_version_string ())

Version 1.16.0

Thanks for the quick replies

[Tontyna]

Same Cairo here. Hmm...

@mojimi Maybe a stupid question, but: Does the jsFiddle indeed fail for you?
I assume the HTML / CSS you provided were extracted from your original, more comprehensive source, maybe leaving off the rule that prevents the 100% width...

[mojimi]

Same Cairo here. Hmm...

@mojimi Maybe a stupid question, but: Does the jsFiddle indeed fail for you?
I assume the HTML / CSS you provided were reduced from your original, more comprehensive source, maybe leaving off the rule that prevents the 100% width...

No, the jsFiddle works for me! It shows what I'm trying to achieve.

And the HTML/CSS I provided is exactly the same as my original as I'm just testing for now 😬 .

But... I did some reinstalling and some cleaning and it works now! But using Bootstrap's flex row/columns still doesn't work, but that's fine, also if I'm not mistaken it does mention in the docs that flex is not perfect.

Thanks for the help! This library is amazing much better than the alternatives

[Tontyna]

No, the jsFiddle works for me!

Wrong wordings in my stupid question -- of course I wanted to ask whether the example you provided fails in WeasyPrint...

...since it works now everywhere: 🎉

[liZe]

Thanks for the help! This library is amazing much better than the alternatives

😄

...since it works now everywhere:

🎉

[mojimi]

@liZe You can keep it closed, but I found out what the issue was.

In my .css example I accidentaly used width instead of just max-width.

By changing to max-width the problem does comeback, but just using width is fine for me.

[liZe]

It's probably related to #656.