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.

Sign up for GitHub

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

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

Open
mbucc opened this issue Dec 26, 2022 · 0 comments
Open

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

mbucc opened this issue Dec 26, 2022 · 0 comments

Comments

@mbucc
Copy link
Contributor

mbucc commented Dec 26, 2022 •
edited
Loading

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@mbucc