我可以更改css

Question

我正在制作圆形标签形成步骤，我必须在链接处于活动状态时更改图像。它完美地改变了，但改变的图像的大小是不同的。我该怎么做呢？ css：

＆＃13;

＆＃13;

li.active span.round-tabs.two {
  border: 2px solid #ddd;
  color: #febe29;
  background: blue !important;
  content: url('../images/round-tap-icons/round-tab-icon-3.png');
}

＆＃13;

<ul class="nav nav-tabs" id="myTab">
  <div class="liner"></div>
  <li class="active">
    <a href="#home"  title="welcome">
      <span class="round-tabs one" onclick="showtabimg()">
        <img src="images/round-tap-icons/round-tab-icon-1.png" />
        <img src="images/round-tap-icons/round-tab-icon-1-white.png" style="display:none" />
      </span>
    </a>
    <h3>order</h3>
  </li>

  <li>
    <a href="#wallet" data-toggle="tab" title="wallet">
      <span class="round-tabs two">
        <img src="images/round-tap-icons/round-tab-icon-2.png" />
      </span>
    </a> 
    <h3>didgital wallet</h3>
  </li>
  
  <li>
    <a href="#payment" data-toggle="tab" title="payment">
      <span class="round-tabs three">
        <img src="images/round-tap-icons/round-tab-icon-3.png" />
      </span>
    </a>
    <h3>payment</h3>
  </li>

  <li>
    <a href="#confirmation" data-toggle="tab" title="blah blah">
      <span class="round-tabs four">
      <img src="images/round-tap-icons/round-tab-icon-4.png" />
    </span>
    </a>
    <h3>confirmation</h3> 
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

这些图像链接处于活动状态或链接处于非活动状态。

Answer 1

在定义大小的容器中处理不同大小的多个图像时，您有多种选择：

第一个，最天真的，通常最好的是简单地调整它们的大小。因为如果您手动执行此操作，您将能够完全按照自己的意愿执行此操作，并且在缩小图像大小时，还会减小用户必须加载的文件大小。所以更好的页面速度。

第二种是将图像用作容器的背景。这使您可以选择使用CSS属性rar，这可以帮助您调整图片大小，因为您会根据您尝试实现的结果看到它适合。您当然希望使用background-size或cover值。阅读更多here。

第三种可能性是使用图像的CSS宽度，高度及其最小/最大值。虽然如果你想保持比率约束，你只能定义高度或宽度。

最后，与评论状态不同，我认为javascript在大多数情况下都没用。

编辑：使用contain时，它确实占用了容器的大部分尺寸。这里的诀窍可能是内部有一个较小的容器。或者更好的是，由于您的容器似乎只包含图像，因此您可以使用background-size: cover/contain并使用填充来限制背景图像的大小。阅读更多here