I'm facing a challenge with maintaining the size of logo images within their "circle containers" regardless of the browser width.
The containers are set at 100px by 100px using the following CSS:
.timeline-image::before {
content: "";
width: 100px;
height: 100px;
border: 1px solid #aaa;
border-radius: 50%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
z-index: 1;
The images inside should be 90px in size:
.timeline-image img {
position: relative;
z-index: 100;
width: 90px;
height: auto;
}
However, when the viewport width is less than 1127px, the image width starts to shrink.
What would be the best approach to tackle this issue?
Codesandbox link: https://codesandbox.io/s/github/AngelinCalu/bs-vue-timeline-demo