Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

img width is ignored inside tables #227

Closed
aquavitae opened this issue Nov 12, 2014 · 4 comments
Closed

img width is ignored inside tables #227

aquavitae opened this issue Nov 12, 2014 · 4 comments
Labels
bug Existing features not working as expected
Milestone
v0.42

Comments

@aquavitae
Copy link

With html of the following form:

<table>
  <tbody>
    <tr>
      <td><img ...></img></td>
    </tr>
  </tbody>
</table>

And css:

table img {max-width: 100%; width:100%}

The width spec is ignored, and the image displays full size
@SimonSapin
Copy link
Member

What result do you expect here? What result do you obtain? Both 100% values refer to the width of the table, but you don’t specify a width for the table, so it default to auto. width: auto on a table means doing a shrink-to-fit… based on the intrinsic size of the content.

@aquavitae
Copy link
Author

Sorry, I don't think I explained well enough. In my case, I have table with a defined width (e.g. table {width: 100%;}) containing a photo with width:100%. The photo is rendered full size, which is very large. If I specify a size in fixed units, e.g. img {width: 100px;} if renders fine. Here is a complete example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      table {
        width: 50%;
        border: 2px solid black;
      }
      table img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td>
            <img src="http://www.public-domain-photos.com/free-stock-photos-4/travel/death-valley/death-valley-sand-dunes.jpg"></img>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

In a web browser, it draws the image across half the screen. When rendered to pdf, the image size is unaffected. Using a fixed table size, e.g. in pixels does not change the problem.

@SimonSapin
Copy link
Member

Ok, I see why this happens in WeasyPrint. We ignore percentages during intrinsic widths calculation, and then the table gets at least its minimum intrinsic width, even if it has a smaller specified width.

Unfortunately, the spec on this subject looks wrong, and I don’t quite understand the algorithm browsers use here. This might requires some more investigation / reverse-engineering :/

@liZe liZe added the bug Existing features not working as expected label Jan 29, 2016
@liZe liZe mentioned this issue Oct 11, 2017
Closed
@liZe liZe added this to the v0.42 milestone Oct 11, 2017
@liZe liZe closed this as completed in 1076b10 Oct 11, 2017
@liZe
Copy link
Member

liZe commented Oct 11, 2017

Here's what we get in the spec now:

However, in the case of a replaced box with a percentage-based width/max-width/height/max-height, the percentage is resolved to zero when calculating the min-content contribution in the corresponding axis.

That's not the most precise rule I've ever seen. BTW, I've followed what this rule seems to imply (at least for width), and the result is more or less what we get in browsers. It fixes the example given in this issue and in #521, I hope that nobody relies on the old behavior (that wasn't really specified anyway).

@jessejoe jessejoe mentioned this issue Feb 14, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Existing features not working as expected
Projects
None yet
Milestone
v0.42
Development

No branches or pull requests
3 participants
@SimonSapin @liZe @aquavitae