修复 bootstrap 4 中缩小的图像

Question

我正在尝试让徽标图像填充它们 "circle containers" 并防止它们随着浏览器的宽度而缩小。

容器大小为 100px x 100px：

.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;

里面的图片应该有 90px:

.timeline-image img {
    position: relative;
    z-index: 100;
    width: 90px;
    height: auto;
}

但是，视口宽度低于 1127 像素时，图像的宽度将开始缩小。

我应该如何处理这个问题？

Codesandbox：https://codesandbox.io/s/github/AngelinCalu/bs-vue-timeline-demo

Answer 1

修改这段代码

<div class="timeline-image text-sm-center mx-md-4 col-md-1 offset-md-0 col-1 offset-1 order-1">
   <img src="img/microsoft.png" alt="Microsoft Corporation" class="img-fluid">
</div>

为此

<div class="timeline-image d-flex justify-content-center mx-md-4 col-md-1 offset-md-0 col-1 offset-1 order-1">
  <img src="img/microsoft.png" alt="Microsoft Corporation">
</div>

我去掉了img-fluidclass，导致logo变小了。我还删除了 text-sm-center class 因为没有仅用于图像的文本，但我在 flex 对象中添加了两个 d-flex justify-content-center。

修复 bootstrap 4 中缩小的图像

fix image being shrank in bootstrap 4

html

css

bootstrap-4

bootstrap-vue