twitter-bootstrap - 如何阻止图像在引导响应式设计中变得模糊？/

Question

bootstrap-responsive.css添加到max-width:100%所有.img标签。因此，我的图像变得越来越模糊。如果我删除它，图像会非常清晰但不再响应。有没有办法让我拥有响应式图像（即自行调整大小）并且仍然让它们清晰而不模糊

Answer 1

您需要通过在缩放浏览器时不希望重新调整大小的图像添加一个类来覆盖最大宽度设置。

    .fixed_width {
      height: 32px;
      width: 32px;
      max-height: 32px;
      max-width: 32px;
     }

    <img class="fixed_width" alt="{{item.Name}}" ng-src="Images/{{item.ImageUrl}}" />

Answer 2

我已经通过在图像的外部容器上放置一个最大宽度到图像尺寸来解决这个问题。

.outer-image-container { 
    max-width: 500px;
}

HTML 将如下所示：

<div class="outer-image-container">
     <img src="image.png" class="img-responsive" />
</div>

希望这个对你有帮助。它使我的图像保持响应而不会使其模糊。