Question

这是html / css中一个众所周知的难题，但无论如何我都在问。我正在寻找一个具体的回应，而不是一个哲学的反应。

如果在下面的html文件中我只使用“width：64px;”，则图像以正确的宽高比显示，但列表项的间距不均匀。

如果我使用“width：64px; height：64px;”，则项目分隔正确，但图像的宽高比不正确。

常见的解决方案是将图像包裹在正方形内。我想避免这种情况。

<html>
    <head>
        <style type = "text/css"> 
            img {
            width: 64px;
            }
        </style> 
    </head>
    <body>
        <ul>
            <li>
                <a href="foo.html">
                    <img align="middle" style="bulletIcon" src="image1.svg"/>
                    Foo
                </a>
            </li>
            <li>
                <a href="bar.html">
                    <img align="middle" style="bulletIcon" src="image2.svg"/>
                    Foo
                </a>
            </li>
            <li>
                <a href="bar.html">
                    <img align="middle" style="bulletIcon" src="image2.svg"/>
                    Foo
                </a>
            </li>
            <li>
                <a href="foo.html">
                    <img align="middle" style="bulletIcon" src="image1.svg"/>
                    Foo
                </a>
            </li>
        </ul>
    </body>
</html>

以下是两张图片。他们在这里是为了完整性，但实际问题确实更难，因为它们是jpg / png（所以我不能只使用svg视图，这无论如何都是一个糟糕的解决方案。）

这是image1.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100" height="200"
     viewBox="0 0 100 200"
     version="1.1">
<g>
    <path d="M 10 10 L 90 10 L 90 190 L 10 190 z"
          fill="cyan" stroke="blue" stroke-width="3" />
</g>
</svg>

现在是image2.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="100"
     viewBox="0 0 200 100"
     version="1.1">
<g>
    <path d="M 10 10 L 190 10 L 190 90 L 10 90 z"
          fill="cyan" stroke="blue" stroke-width="3" />
</g>
</svg>

Answer 1

如果您不需要IE7支持，我建议您使用table-row / table-cell：http://jsfiddle.net/vRkgs/

li {
    display:table-row;
}
li a {
    display:table-cell;
    height:100px;
    vertical-align:middle;
}

维持方形html元素内图像的纵横比

1 个答案: