0

流動的なデザイン レイアウトでは、すべての画像の高さが同じで、画像の縦横比に応じて幅が異なるように画像をスケーリングしたいと考えています。また、すべての画像はアンカー タグ内にあります。Mozilla ブラウザーで、アンカー タグの幅が自動的に調整されないという問題が発生します。たとえば、画像のサイズが 200x100px でアンカー タグの高さが 50px の場合、Mozilla ではアンカー タグのサイズは 100x50px ではなく 200x50px になります。これを修正するには、どの 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

これを試してください....set.testimage todisplay: block; タグの高さまたは幅を指定するには、インラインブロックではなくブロックに表示を適用する必要があります。これがうまくいくことを願っています。

于 2013-03-10T04:43:22.823 に答える
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 に答える