Question

在流体设计布局中，我想缩放图像，使所有图像都具有相同的高度，但根据图像的纵横比可能会有不同的宽度。此外，所有图像都位于锚标记内。在Mozilla浏览器中，我遇到一个问题，锚标签的宽度不会自动调整。例如，如果图像的尺寸为200x100px，锚标记的高度为50px，那么在Mozilla中，锚标记的尺寸为200x50px，而不是100x50px。我的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>

Answer 1

您需要使用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>

这里是example。

Answer 2

试试这个.... 将.testimage设置为display: block; 要指定标记的高度或宽度，应将display应用于block而不是inline-block。希望这有效。

如何用CSS宽度控制图像父元素

2 个答案: