<form action="">
<fieldset>
<legend class="">Pick the aspect ratio</legend>
<p>
<input class="sr-only" type="radio" name="ratio" id="r1" checked data-ratio="4/3" />
<label for="r1">4/3</label>
</p>
<p>
<input class="sr-only" type="radio" name="ratio" id="r2" data-ratio="2/1" />
<label for="r2">2/1</label>
</p>
<p>
<input class="sr-only" type="radio" name="ratio" id="r3" data-ratio="1/1" />
<label for="r3">1/1</label>
</p>
<p>
<input class="sr-only" type="radio" name="ratio" id="r4" data-ratio="16/9" />
<label for="r4">16/9</label>
</p>
</fieldset>
</form>
<article class="card">
<div class="card__thumb">
<img src="https://s3.eu-central-1.amazonaws.com/ishadeed.com/muffins.png?response-content-disposition=inline&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEP7%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDGV1LWNlbnRyYWwtMSJHMEUCIQDmOzx4HDaFUYpdEcQTa%2By1655mBUFgouCHN6AMPq0W7gIgeXoni%2Fx5siO9dm8ZrWrhXjphQxfzWHCnoqT0Py9OGhYq%2FwIIt%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FARAAGgwzNDkxMjMwNjkzMzEiDLZHttIkfrJ5TzrBBSrTAhIVkMHZodJFxz9hntRzPcbs3Zl0UIzHCE0Ava1vcwKnG8t3ViIRC%2BnUAdZBGKpdg6wNYAPq%2B%2BdyFWrY%2FNkG49nLVaMgFrL0NjuLJ2nF0hSKmya7a3AIaYZz1QQrlQYkGnOdiNg1HX88hCVimryEgXassVpXhymarV3lrn4rzbetPrOh7%2Byrdk9INREpY5rphLa5cFgsdCGn5nDJm8eSpFeAQbaQ6LSwLmpufGXbrgFJOuHuSHl4ZXZdWINhuOllHglXw1A4csHanke1wgxF9%2BkUco3OBlqqba06g0ynGoAe0MDt8HDsU5ecDSghRzv9hCjtm7owR9ireTABsTw1njA2viB9MR91SmJHmnQ%2FBij3IO8fsVlq7cCN%2BCXn3af%2F1aqp7jOEfOS5M2hF7N6jVPAupFRVP92nllBDh5gM9B3XJucokiL%2Brv%2BHh9ts7%2FZ27UR6PDCj%2B4uGBjqzAvo5CZzlScLDdAC1GyNIVDx31%2F2QBi%2BlV3jVnZtVS9k6UjToFTLF5HlB25mHWlJ%2FxqJRCaxScKyz45whpGVo34wWpNcRMLlWiPN7dAU6bV59ZYoMOeMjYOXEUOGOkZmEcu6EXPIZwIUWs42%2FpDd8Ns4wfU6SgawdTs7YaOzObnId8mp0Iqeo5HQv75qyZbwofc7hgBP%2BJ0m7%2BehAocT4hqupv7MM7EosN5lmKSZlEqSdwjZ4qKdO6owXhiKOUr5Z1CT5SDPHzBva8dWNlHxmhGLXUi%2F2DgZHMwFxqswbg9qb8IkdYZJwlgDy2KRUsOX3DPMEyB1Srwk8thM49W51PHuBQkjWi2Z9q%2BT%2FHQlAGSLM4Q5JSQBrjmBINlaFeXceAGLQKf8vFfAMLUnEcjqpB4tN8Zc%3D&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20210611T061341Z&X-Amz-SignedHeaders=host&X-Amz-Expires=300&X-Amz-Credential=ASIAVCSK3IWJ4YTUY3VD%2F20210611%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Signature=1b9cce28ec1cf4b4c058f22ef440b2c5cb302caa98b0105b14833f103e156f13" alt="" />
</div>
<div class="card__content">
<h3>Muffins Recipe</h3>
<p>Servings: 3</p>
</div>
</article>
.card {
max-width: 260px;
margin: 2rem auto 0;
}
.card__thumb {
position: relative;
--ratio: 4/3;
aspect-ratio: var(--ratio);
transition: 0.4s ease-out;
img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.card__content {
padding: 1rem;
background-color: #e6e6e6;
h3 {
font-weight: bold;
font-size: 1.125rem;
margin-bottom: 0.25rem;
}
}
img {
display: block;
max-width: 100%;
}
form {
margin-top: 2rem;
}
fieldset {
display: flex;
gap: 1rem;
justify-content: center;
text-align: center;
}
legend {
margin-bottom: 1rem;
}
input:checked + label {
color: #fff;
background-color: #1b84c2;
box-shadow: inset 0 0 0 4px rgba(#000, 0.1), 0 3px 10px 0 rgba(#000, 0.2);
}
input + label {
display: inline-block;
min-width: 50px;
text-align: center;
padding: 6px 20px;
color: #696969;
border: 1px solid #d0d0d0;
border-radius: 100px;
cursor: pointer;
}
.sr-only {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
body {
font-family: "system-ui";
line-height: 1.4;
padding: 1rem;
background-color: #f7f7f7;
}
* {
box-sizing: border-box;
}
View Compiled
let options = document.querySelectorAll("[name=ratio]");
for (var i = 0; i < options.length; i++) {
options[i].addEventListener("change", function () {
let ratio = this.getAttribute("data-ratio");
document.querySelector(".card__thumb").style.setProperty("--ratio", ratio);
});
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.