<commit_before>---
feature_name: Intrinsic Size Attribute
chrome_version: 71
feature_id: 4704436815396864
check_min_version: true
---

<h3>Background</h3>
<p>
The <a href="https://github.com/ojanvafai/intrinsicsize-attribute">intrinsic size attribute</a>
allows web developers to specify the intrinsic size of a media element (&lt;img&gt;, &lt;video&gt;, and &lt;svg:image&gt;).
This enables a media element to maintain aspect ratio while being proportional to the width of the screen, for example, without
causing a visual reflow.
</p>
<p>
This attribute overrides the actual intrinsic size of an media element. Specifically, the image would raster at these
dimensions and <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-naturalwidth">naturalWidth/naturalHeight</a> 
on images would return the value specified in this attribute. On video elements, the video would raster at this size and
<a href="https://html.spec.whatwg.org/multipage/media.html#dom-video-videowidth">videoWidth/videoHeight</a> on the video would return the intrinsicsize values.
</p>

<h3>Case 1</h3>
<p>if no width/height are otherwise set on an image, then the size is specified by &quot;intrinsicsize&quot;</p>
<button class="demoButton" onclick="toggleDemo(this)">See Demo</button>
<center class="demoContent">
  {% include_relative unsized.html %}
  {% highlight html %}
   <img intrinsicsize="250 x 200" src="cat.jpg">
  {% endhighlight %}
</center>

<h3>Case 2</h3>
<p>If the width is set on an image, then the height is set to maintain the aspect ratio defined in &quot;intrinsicsize&quot;</p>
<button class="demoButton" onclick="toggleDemo(this)">See Demo</button>
<center class="demoContent">
  {% include_relative width_only.html %}
  {% highlight html %}
    <div style="width:300px;"> <img intrinsicsize="250 x 200" style="width:100%" src="cat.jpg"> </div>
  {% endhighlight %}
</center>

<h3>Case 3</h3>
<p>If width and height are set on an image, the intrinsic size of an image is still overridden by the value of the 
&quot;intrinsicsize&quot; attribute</p>
<button class="demoButton" onclick="toggleDemo(this)">See Demo</button>
<center class="demoContent">
  {% include_relative sized.html %}
  {% highlight html %}<commit_msg>Update index.html<commit_after>---
feature_name: Intrinsic Size Attribute
chrome_version: 71
feature_id: 4704436815396864
check_min_version: true
---

<h3>Background</h3>
<p>
The <a href="https://github.com/ojanvafai/intrinsicsize-attribute">intrinsic size attribute</a>
allows web developers to specify the intrinsic size of a media element (&lt;img&gt;, &lt;video&gt;, and &lt;svg:image&gt;).
This enables a media element to maintain aspect ratio while being proportional to the width of the screen, for example, without
causing a visual reflow.
</p>
<p>
This attribute overrides the actual intrinsic size of an media element. Specifically, the image would raster at these
dimensions and <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-naturalwidth">naturalWidth/naturalHeight</a> 
on images would return the value specified in this attribute. On video elements, the video would raster at this size and
<a href="https://html.spec.whatwg.org/multipage/media.html#dom-video-videowidth">videoWidth/videoHeight</a> on the video would return the intrinsicsize values.
</p>

<h3>Case 1</h3>
<p>if no width/height are otherwise set on an image, then the size is specified by &quot;intrinsicsize&quot;.</p>
<button class="demoButton" onclick="toggleDemo(this)">See Demo</button>
<center class="demoContent">
  {% include_relative unsized.html %}
  {% highlight html %}
   <img intrinsicsize="250 x 200" src="cat.jpg">
  {% endhighlight %}
</center>

<h3>Case 2</h3>
<p>If the width is set on an image, then the height is set to maintain the aspect ratio defined in &quot;intrinsicsize&quot;.</p>
<button class="demoButton" onclick="toggleDemo(this)">See Demo</button>
<center class="demoContent">
  {% include_relative width_only.html %}
  {% highlight html %}
    <div style="width:300px;"> <img intrinsicsize="250 x 200" style="width:100%" src="cat.jpg"> </div>
  {% endhighlight %}
</center>

<h3>Case 3</h3>
<p>If width and height are set on an image, then value of the &quot;intrinsicsize&quot; attribute only affects the values of 
naturalWidth/naturalHeight, but not the rendered size of the image.</p>
<button class="demoButton" onclick="toggleDemo(this)">See Demo</button>
<center class="demoContent">
  {% include_relative sized.html %}
  {% highlight html %}
{'fraction_non_alphanumeric': 0.127368884971353, 'fraction_numerical': 0.020713970912296167, 'mean_word_length': 5.568740955137482, 'pattern_counts': {'":': 0, '<': 81, '<?xml version=': 0, '>': 81, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7287739', 'n_tokens_mistral': 1522, 'n_tokens_neox': 1381, 'n_words': 467}