v.5.3.6

Author: SimonPadbury

docs/docs/4-decoration-utilities/images/index.html

@@ -717,20 +717,16 @@ <h2 id="contained-images" tabindex="-1">Contained images</h2>
 <p><strong>Note:</strong> The CSS classes <code>img-cover</code> and <code>img-contain</code> are designed to work on the <code>&lt;img&gt;</code> tag. They may not work very well on an embedded <code>&lt;svg&gt;</code> (i.e. if you copy-pasted the SVG code into the HTML). But they work fine if an SVG image is inserted into a page the normal way for images: via the <code>&lt;img&gt;</code> tag.</p>
 <h2 id="image-css-filters" tabindex="-1">Image CSS filters</h2>
 <h3 id="grayscale-filter" tabindex="-1">Grayscale filter</h3>
-<div style="height: 460px;">
-  <img class="img-cover img-grayscale" src="/codebase-5/img/pexels-pixabay-416179.jpg" width="600" height="600" loading="lazy" alt="Photo by Pixabay from Pexels">
-</div>
+<img class="aspect-ratio-16x9 img-cover img-grayscale" src="/codebase-5/img/pexels-pixabay-416179.jpg" width="600" height="600" loading="lazy" alt="Photo by Pixabay from Pexels">
 <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img-grayscale<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lazy<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
 <h3 id="blur-filter" tabindex="-1">Blur filter</h3>
-<div style="height: 460px;">
-  <img class="img-cover img-blur" src="/codebase-5/img/pexels-pixabay-416179.jpg" width="600" height="600" loading="lazy" alt="Photo by Pixabay from Pexels">
-</div>
+<img class="aspect-ratio-16x9 img-cover img-blur" src="/codebase-5/img/pexels-pixabay-416179.jpg" width="600" height="600" loading="lazy" alt="Photo by Pixabay from Pexels">
 <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img-blur<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lazy<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
-<p>What if you don’t want the blurry edges spreading outside of the image rectangle? Then you can wrap the image in a block that has the <code>overflow-hidden</code> utility class.</p>
-<div class="overflow-hidden" style="height: 460px;">
-  <img class="img-cover img-blur" src="/codebase-5/img/pexels-pixabay-416179.jpg" width="600" height="600" loading="lazy" alt="Photo by Pixabay from Pexels">
+<p>What if you don’t want the blurry edges spreading outside of the image rectangle? Then you can wrap the image in a block that has the <code>overflow-clip</code> utility class.</p>
+<div class="overflow-clip">
+  <img class="aspect-ratio-16x9 img-cover img-blur" src="/codebase-5/img/pexels-pixabay-416179.jpg" width="600" height="600" loading="lazy" alt="Photo by Pixabay from Pexels">
 </div>
-<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>overflow-hidden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img-blur<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lazy<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code></pre>
+<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>overflow-clip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img-blur<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lazy<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code></pre>
 <h2 id="opacity-and-images" tabindex="-1">Opacity and Images</h2>
 <p>Codebase has a set of opacity utility classes that can be used on images.</p>
 <p>Since Codebase v5.10, there are hover states set for each.</p>

src/docs/4-decoration-utilities/images.md

@@ -42,7 +42,7 @@ Follow these two rules when using `img-cover`:
 
 2. Be sure to optimize the filesize of your image. You don’t want to make your visitor wait a long time  (several seconds, or more) for your image to load if they have a slow connection.
 
-Many web platforms have _image processors_ built in, or added via a plugin. For example: 
+Many web platforms have _image processors_ built in, or added via a plugin. For example:
 
 * The [Eleventy](https://www.11ty.dev) static site generator has an [Eleventy-image plugin](https://www.11ty.dev/docs/plugins/image/)
 * [WordPress](https://wordpress.org) has a [built-in image processor](https://www.wpbeginner.com/beginners-guide/wordpress-image-sizes-beginners-guide/) for automatic image resizing and loading for different sized devices (and lazy loading). Plus, there are several image-optimizer plugins.
@@ -165,32 +165,28 @@ The image below is a square, therefore on wider viewports, there will be empty s
 
 ### Grayscale filter
 
-<div style="height: 460px;">
-  <img class="img-cover img-grayscale" src="{{ '/img/pexels-pixabay-416179.jpg' | url }}" width="600" height="600" loading="lazy" alt="Photo by Pixabay from Pexels">
-</div>
+<img class="aspect-ratio-16x9 img-cover img-grayscale" src="{{ '/img/pexels-pixabay-416179.jpg' | url }}" width="600" height="600" loading="lazy" alt="Photo by Pixabay from Pexels">
 
 ```html
 <img class="img-grayscale" src="" width="" height="" loading="lazy" alt="">
 ```
 
 ### Blur filter
 
-<div style="height: 460px;">
-  <img class="img-cover img-blur" src="{{ '/img/pexels-pixabay-416179.jpg' | url }}" width="600" height="600" loading="lazy" alt="Photo by Pixabay from Pexels">
-</div>
+<img class="aspect-ratio-16x9 img-cover img-blur" src="{{ '/img/pexels-pixabay-416179.jpg' | url }}" width="600" height="600" loading="lazy" alt="Photo by Pixabay from Pexels">
 
 ```html
 <img class="img-blur" src="" width="" height="" loading="lazy" alt="">
 ```
 
-What if you don’t want the blurry edges spreading outside of the image rectangle? Then you can wrap the image in a block that has the `overflow-hidden` utility class.
+What if you don’t want the blurry edges spreading outside of the image rectangle? Then you can wrap the image in a block that has the `overflow-clip` utility class.
 
-<div class="overflow-hidden" style="height: 460px;">
-  <img class="img-cover img-blur" src="{{ '/img/pexels-pixabay-416179.jpg' | url }}" width="600" height="600" loading="lazy" alt="Photo by Pixabay from Pexels">
+<div class="overflow-clip">
+  <img class="aspect-ratio-16x9 img-cover img-blur" src="{{ '/img/pexels-pixabay-416179.jpg' | url }}" width="600" height="600" loading="lazy" alt="Photo by Pixabay from Pexels">
 </div>
 
 ```html
-<div class="overflow-hidden">
+<div class="overflow-clip">
   <img class="img-blur" src="" width="" height="" loading="lazy" alt="">
 </div>
 ```