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

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>

希望这会有所帮助。它可以保持我的图像响应而不会模糊它。