Commentary
The img element with its parent figure tag provides responsive image controls.
The image can be fit into the available area as well. Adapted from
Spectre CSS.
The .img-as-content modifier to the figure tag allows the image to be part of the
content flow for text. The image width is set to 75% of the parent container, centers the image in the container and also adds
margins to top and bottom to provide white space.
Adding the .img-responsive class to img elements allows the images to scale with parent size changes.
Images are further enhanced with fixed width controls to over-ride responsive image resizing.
This lets you include this element into components and maintain its size as the rest of the component is adjusted
around this image.
Adding the img-fit-contain or img-fit-cover class to img controls how the
image fills the space. The media will crop itself to fit inside the element (and you don't need another container).
If a fixed width is given, the image can be controlled by its aspect ratio. This ensures that the image will be true to its original format. These sizes are documented at still photography aspect ratios.
Usage
| Classes: | |
|---|---|
figure, figcaption, img |
Core HTML tags as parent and children |
.img-responsive |
Ensures image will scale with viewport. |
.img-as-content |
For images that appear in columns of text, adds margin, sets width to 75% of column and auto adjusts image height. |
.img-fit-cover |
Ensures image will cover the parent container |
.img-fit-contain |
Parent container height or width determines maximum image dimension. |
| Landscape sizes: | .has-aspect-3x1, .has-aspect-2x1, .has-aspect-16x9
.has-aspect-3x2, .has-aspect-4x3, .has-aspect-5x4,
.has-aspect-1x1
|
| Portrait sizes: | .has-aspect-1x3, .has-aspect-1x2, .has-aspect-9x16
.has-aspect-2x3, .has-aspect-3x4, .has-aspect-4x5,
|
| Dependencies: | |
|---|---|
| File: | image.css |
| Variables: | --margin-medium, --mar-vert, --weight-medium |
Examples
Basic Image Set-up
<figure>
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-demo.jpg" class="" alt="Girl with balloons" loading="lazy">
<figcaption>Love Our Planet from Pixelbay</figcaption>
</figure>
Fitting Images into Parent Container
<figure>
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-demo.jpg" class="has-height-10rem" alt="girl with balloons" loading="lazy">
<figcaption>No fitting - image is stretched but remains responsive.</figcaption>
</figure>
<figure>
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-demo.jpg" class="has-height-10rem img-fit-contain" alt="girl with balloons" loading="lazy">
<figcaption>"img-fit-contain" - Maintains aspect ratio and matches max height or max width.</figcaption>
</figure>
<figure>
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-demo.jpg" class="has-height-10rem img-fit-cover" alt="girl with balloons" loading="lazy">
<figcaption>"img-fit-cover" - Maintains aspect ratio and clips image.</figcaption>
</figure>
Fixed Size Square Images
<figure>
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-demo.jpg" class="has-aspect-1x1 has-width-8rem" alt="Girl with balloons" loading="lazy">
<figcaption>8rem</figcaption>
</figure>
Landscape Images Fit to Fixed Width
<figure>
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-demo.jpg" class="has-aspect-2x1 has-width-10rem" alt="Girl with balloons" loading="lazy">
<figcaption>.has-aspect-2x1</figcaption>
</figure>
Portrait Images Fit to Fixed Width
<figure>
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-demo.jpg" class="has-aspect-2x3 has-width-8rem" alt="Girl with balloons" loading="lazy">
<figcaption>.has-aspect-2x3</figcaption>
</figure>