search

edwardtufte / tufte-css

Style your webpage like Edward Tufte’s handouts.
https://edwardtufte.github.io/tufte-css/
MIT License
5.98k stars 458 forks source link

Using srcset inside fullwidth figure renders an image that is not full width #181

Open mbucc opened 1 year ago

mbucc commented 1 year ago

The first markup, with srcset, renders the image with a width of 860.45px.

The second markup, with the srcset attribute removed, renders the image with a width of 1045px, which matches the figure element width.

This behavior is present in both Safari Version 16.2 (18614.3.7.1.5) and Chrome Version 108.0.5359.124 (Official Build) (arm64).

First Markup

<html lang=en>
<head>
  <title>Test Page</title>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href="/css/tufte.min.css">
</head>
<body>
<article>

<h1>Test Page</h1>

<section>
  <figure class="fullwidth">
    <img
      srcset="
        /img/jefferson-part1-800.jpg  700w,
        /img/jefferson-part1-1000.jpg 900w,
        /img/jefferson-part1-1200.jpg 1100w,
        /img/jefferson-part1-1400.jpg 1300w,
        /img/jefferson-part1-1600.jpg 1500w,
        /img/jefferson-part1-1800.jpg 1700w,
        /img/jefferson-part1-2000.jpg 1900w
      "
      src=/img/jefferson-part1-1800.jpg
      alt="Top half of 1769 page from Thomas Jefferson's garden book." />
  </figure>
</section>

</article>
</body>
</html>
image

Second Markup

<html lang=en>
<head>
  <title>Test Page</title>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href="/css/tufte.min.css">
</head>
<body>
<article>

<h1>Test Page</h1>

<section>
  <figure class="fullwidth">
    <img
      src=/img/jefferson-part1-1800.jpg
      alt="Top half of 1769 page from Thomas Jefferson's garden book." />
  </figure>
</section>

</article>
</body>
</html>
image