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

img width is ignored inside tables #227

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

Comments

Projects
None yet
3 participants
@aquavitae

aquavitae commented Nov 12, 2014

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

This comment has been minimized.

Show comment
Hide comment
@SimonSapin

SimonSapin Nov 12, 2014

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.

Member

SimonSapin commented Nov 12, 2014

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

This comment has been minimized.

Show comment
Hide comment
@aquavitae

aquavitae Nov 13, 2014

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.

aquavitae commented Nov 13, 2014

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

This comment has been minimized.

Show comment
Hide comment
@SimonSapin

SimonSapin Nov 13, 2014

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 :/

Member

SimonSapin commented Nov 13, 2014

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 label Jan 29, 2016

@liZe liZe added this to the v0.42 milestone Oct 11, 2017

@liZe liZe closed this in 1076b10 Oct 11, 2017

@liZe

This comment has been minimized.

Show comment
Hide comment
@liZe

liZe Oct 11, 2017

Member

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).

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment