I have a collection of web pages featuring tiles with various images
For example:
https://i.sstatic.net/HKna1.jpg
Some of my pages look identical to these, but do not include any images
https://i.sstatic.net/rLXPY.png
In the second screenshot, each tile corresponds to a number. My goal is to display an image alongside that number.
Is there a simple way to show a number as an image within a bordered tile that can be clicked anywhere to trigger the hyperlink?
I am utilizing Bootstrap 5.1 if that information is pertinent
Update
I've had some success using CSS as recommended
<div style="display:grid;grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));grid-gap: 10px;" id="tiles">
<div class="tile" style="display:block" sort_order="0" name_order="0">
<a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&title=Bpms / 0&cid=0$=BPM$6909" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
0
</a>
</div>
<div class="tile" style="display:block" sort_order="1" name_order="69">
<a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&title=Bpms / 61&cid=0$=BPM$31324" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
61
</a>
</div>
</div>
However, I would like the buttons' width to always remain consistent regardless of the text length (e.g., 1 versus 120)