Question

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

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

顺便说一下，我已经尝试过强制宽度＆amp; 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>

Answer 1

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

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

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

我更愿意使用CSS解决方案而不是旁路。

Bootstrap堆叠导航栏正在拉伸图像

1 个答案: