I have a series of images stored horizontally in a sprite. Some are landscape photos, and others are portrait photos.
I want to display them as images on buttons, without distorting them. The landscape photos are being displayed correctly, but the portrait photos, because they are narrower, display part of the next image.
I can think of three different approaches to hide that unwanted image, but the quickest and easiest one is probably to use a :after pseudo class. I recall someone mentioning this technique on Stack Overflow, but now I can’t find this again. How can I do this?
Here’s my current code:
/* Global constants */
:root {
--portWidth: calc(2052px / 4); /* Width of portrait photos */
--landWidth: calc(3264px / 4); /* Width of landscape photos */
}
figure {display: block;
float:left;
border-width:thin;
}
figcaption {background-color:yellow;}
.thumb::after { content: " ";
display: inline-block;
width: 30em;
}
#img1, #img2, #img3 {
background-repeat: no-repeat;
object-fit: none;
}
#thumb1, #thumb2, #thumb3 {
background: url("bates-sprite.jpeg");
background-repeat: no-repeat;
object-fit: none;
width: 30em;
height: 30em;
background-size: cover;
float: left;
margin-right: 1.5em;
}
/* Landscape photo */
#img1 {
object-position: 0 0;
width: var(--landWidth);
height: 612px; // full size 2448
}
#thumb1 { background-position: 0 0; }
/* Landscape photo */
#img2 {
object-position: calc( var(--landWidth) * -1); 0;
width: var(--landWidth);
height: 612px;
}
#thumb2 { background-position: -30em 0; }
/* Portrait photo */
#img3 {
object-position: calc( ( var(--landWidth) * -1) * 2) 0;
width: var(--portWidth);
height: calc(3101px / 4); /* full size 3101 */
}
#thumb3 { background-position: -60em 0; }
</style>
</head>
<body>
<main>
<figure id="fig1">
<figcaption>Camberley Mail</figcaption>
<p>Text to go with picture.</p>
</figure>
<figure id="fig2">
<figcaption>The Independent</figcaption>
<p>Text to go with picture.</p>
</figure>
<figure id="fig3">
<figcaption>Harry Cohen MP</figcaption>
<p id="para">Text to go with picture.</p>
</figure>
function imgBtn (figNum) {
// Insert a button with thumbnail image
let html = '<button type="button" ' +
'class="thumb" ' +
'id="thumb' + figNum +
'" onclick="showBigImg (' + figNum + ')"></button>';
const figcap = document.getElementById("fig" + figNum).firstElementChild;
figcap.insertAdjacentHTML ("afterend", html); /* Append the button to
the figcaption */
}