Bootstrap Stacked Navigation Bar 正在拉伸图像答案

【问题标题】：Bootstrap Stacked Navigation Bar is Stretching ImagesBootstrap Stacked Navigation Bar 正在拉伸图像
【发布时间】：2015-06-09 22:56:01
【问题描述】：

我正在使用引导堆叠导航栏来显示固定大小的图像（作为项目）。

由于某种原因，图像被拉伸了。你知道我怎样才能避免这种图像拉伸吗？你能推荐一个 CSS 解决方案吗？

顺便说一句，我已经尝试在 img 标记中强制执行宽度和高度，尽管它不起作用。

下面是部分代码：

 <div class="col-md-1" style="height:100%; padding:2px 0 2px 2px;">
        <div class="top-panel" style="width:100%; padding:5px;">
            <ul class="nav nav-pills nav-stacked">
                <li style="border-radius:0px;">
                    <a style="padding:5px;" href="" popover="Service Catalog" popover-trigger="mouseenter"
                       popover-placement="right">
                        <img  ng-click="setPage('serviceCatalog')" width=61 height=61
                             ng-src="{{currentPage=='serviceCatalog' && 'resources/images/icon_catalog_active.png' || 'resources/images/icon_catalog.png'}}"/>
                    </a>
                </li>
                <li >
                    <a style="padding:5px;" href="" popover="Approver's Summary" popover-trigger="mouseenter"
                       popover-placement="right">
                        <img  ng-click="setPage('approversSummary')" width=61 height=61
                             ng-src="{{currentPage=='approversSummary' && 'resources/images/icon_approval_active.png' || 'resources/images/icon_approval.png'}}"/>
                    </a>
                </li>


            </ul>
        </div>
    </div>

【问题讨论】：

标签： twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

我实施了一个临时解决方案，似乎可以解决我测试的每个解决方案的问题。

我注意到图像被拉伸到 71px/71px（尽管它们是 61px/61px）所以我将图像画布（使用 GIMP）更改为 71px/71px，而真实图像使用其原始大小 61px/61px 放置在内部。

因此，实际的拉伸不会影响图像的可见性。

我更喜欢使用 CSS 解决方案而不是这种绕过方式。

【讨论】：