Fixed width Image - Component

View full screen
Code

Source (Nunjucks)

<img src="https://source.unsplash.com/RTfqNYKbqE4/800x500" width="400" alt="" class="fixed-width-img" />

Output

<img
  src="https://source.unsplash.com/RTfqNYKbqE4/800x500"
  width="400"
  alt=""
  class="fixed-width-img"
/>

Information

This ensures images are scaled to the exact size specified by the width attribute, preventing HiDPI screenshots from being blurry: <img src="800x500.png" width="400" class="fixed-width-img" alt="" />

Key links

Variants

In prose context

View full screen
Code

Source (Nunjucks)

<article class="prose">
  <p>On form submission, browsers automatically set focus on fields with problematic or missing required values. No JavaScript required!</p>
  <figure>
    <img class="fixed-width-img" width="500" height="483" alt="Screenshot of a sign-in form in Chrome on desktop showing browser prompt and focus for an invalid email value." height="483" src="https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format" decoding="async" sizes="(min-width: 500px) 500px, calc(100vw - 48px)" srcset="https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=1000 1000w" loading="lazy">
    <figcaption>Basic built-in validation by the browser.</figcaption>
  </figure>
  <p>Validate inline and provide feedback to the user as they enter data, rather than providing a list of errors when they click the submit button. If you need to validate data on your server after form submission, list all problems that are found and clearly highlight all form fields with invalid values, as well as displaying a message inline next to each problematic field explaining what needs to be fixed. Check server logs and analytics data for common errors—you may need to redesign your form.</p>
  <p>You should also use JavaScript to do more robust validation while users are entering data and on form submission. Use the <a href="https://html.spec.whatwg.org/multipage/forms.html#constraints" rel="noopener">Constraint Validation API</a> (which is <a href="https://caniuse.com/#feat=constraint-validation" rel="noopener">widely supported</a>) to add custom validation using built-in browser UI to set focus and display prompts.</p>
</article>

Output

<article class="prose">
  <p>
    On form submission, browsers automatically set focus on fields with
    problematic or missing required values. No JavaScript required!
  </p>
  <figure>
    <img
      class="fixed-width-img"
      width="500"
      height="483"
      alt="Screenshot of a sign-in form in Chrome on desktop showing browser prompt and focus for an invalid email value."
      height="483"
      src="https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format"
      decoding="async"
      sizes="(min-width: 500px) 500px, calc(100vw - 48px)"
      srcset="
        https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=200   200w,
        https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=228   228w,
        https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=260   260w,
        https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=296   296w,
        https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=338   338w,
        https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=385   385w,
        https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=439   439w,
        https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=500   500w,
        https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=571   571w,
        https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=650   650w,
        https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=741   741w,
        https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=845   845w,
        https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=964   964w,
        https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mPyN7THWJNRQIiBezq6l.png?auto=format&amp;w=1000 1000w
      "
      loading="lazy"
    />
    <figcaption>Basic built-in validation by the browser.</figcaption>
  </figure>
  <p>
    Validate inline and provide feedback to the user as they enter data, rather
    than providing a list of errors when they click the submit button. If you
    need to validate data on your server after form submission, list all
    problems that are found and clearly highlight all form fields with invalid
    values, as well as displaying a message inline next to each problematic
    field explaining what needs to be fixed. Check server logs and analytics
    data for common errors—you may need to redesign your form.
  </p>
  <p>
    You should also use JavaScript to do more robust validation while users are
    entering data and on form submission. Use the
    <a
      href="https://html.spec.whatwg.org/multipage/forms.html#constraints"
      rel="noopener"
      >Constraint Validation API</a
    >
    (which is
    <a href="https://caniuse.com/#feat=constraint-validation" rel="noopener"
      >widely supported</a
    >) to add custom validation using built-in browser UI to set focus and
    display prompts.
  </p>
</article>