/**
* @file
* Image component styles.
*
* Drupal's responsive_image module renders ![]()
for single-
* mapping styles, or for multi-mapping styles. These CSS rules
* provide layout containment and object-fit behavior for either output.
*/
.a-image {
display: block;
margin: 0;
padding: 0;
width: 100%;
line-height: 0;
}
.a-image img,
.a-image__img {
display: block;
width: 100%;
height: auto;
}
/* Aspect ratio constraints applied to the picture/img wrapper. */
.a-image--16x9 img,
.a-image--16x9 .a-image__img {
aspect-ratio: 16 / 9;
object-fit: cover;
}
.a-image--4x3 img,
.a-image--4x3 .a-image__img {
aspect-ratio: 4 / 3;
object-fit: cover;
}
.a-image--1x1 img,
.a-image--1x1 .a-image__img {
aspect-ratio: 1 / 1;
object-fit: cover;
}
/* Fit modes for explicit override. */
.a-image--cover img,
.a-image--cover .a-image__img {
object-fit: cover;
}
.a-image--contain img,
.a-image--contain .a-image__img {
object-fit: contain;
}
/* Ensure element fills its container. */
.a-image picture {
display: block;
width: 100%;
line-height: 0;
}
/* Link wrapper. */
.a-image__link {
display: block;
line-height: 0;
text-decoration: none;
}
.a-image__link:focus img {
outline: 3px solid var(--color-focus, #0075bd);
outline-offset: 2px;
}
/* Caption. */
.a-image__caption {
margin-top: 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
color: var(--color-text-muted, #6b7280);
text-align: center;
}
/**
* Debug: responsive image style in use.
* Hidden by default. To show on page: add class "show-image-debug" to
* (e.g. via DevTools or a temporary theme preprocess). Data attributes are
* always present for inspection in DevTools.
*/
.a-image__debug {
display: none;
margin-bottom: 0.25rem;
padding: 0.2rem 0.4rem;
font-size: 0.7rem;
font-family: monospace;
color: #666;
background: #f0f0f0;
border-radius: 3px;
}
body.show-image-debug .a-image__debug {
display: block;
}