0

在流畅的设计布局中，我想缩放图像，使它们都具有相同的高度，但可能具有不同的宽度，具体取决于图像纵横比。此外，所有图像都位于锚标记内。在 Mozilla 浏览器中，我遇到锚标记的宽度不会自动调整的问题。例如，如果图像的尺寸为 200x100 像素，锚标签的高度为 50 像素，那么在 Mozilla 中，锚标签的尺寸为 200x50 像素，而不是我想要的 100x50 像素。为了解决这个问题，我的 CSS 应该是什么？谢谢

我的 HTML 是：

<a class="testimage"><img src="sliderimages/picture8.jpg"/></a>

CSS是：

<style>  
    .testimage {height:10%;display:inline-block;border:1px solid yellow;}
    .testimage img {height:100%;}
</style>
4

2 回答 2

0

你需要用 JavaScript 做一些简单的计算。这是一个带有 JavaScript 的简单 HTML 页面，供您修改和测试。

<!DOCTYPE html>
<html>
<head>
    <title>
        Set Image Height
    </title>
</head>

<body>
    <img src='testimage1.jpg' onload='setImageHeight()'>
    <img src='testimage2.png' onload='setImageHeight()'>

    <script>
        function setImageHeight(event) {
            // Allow for cross-platform differences
            event = event || this.event;
            element = event.target || event.srcElement;

            var temp = new Image(),
                fixedHeight = 50,
                height, width, scaledWidth;

            temp.src = element.src;
            width = temp.width;
            height = temp.height;
            scaledWidth = width * fixedHeight / height;

            element.style.width = scaledWidth + "px";
            element.style.height = fixedHeight + "px";
        }
    </script>
</body>
</html>

这是一个例子。

于 2013-03-10T04:05:24.307 回答
0

试试这个 .... 将 .testimage 设置为display: block; 要指定标签的高度或宽度，您应该将显示应用于块而不是内联块。希望这有效。

于 2013-03-10T04:43:22.823 回答