0

幅に合わせてCSSの背景画像と同様に、高さは比例して自動スケーリングする必要があります。画像を固定幅にスケーリングし、高さは無制限にしたいと考えています。

ただし、その質問とは異なり、これは<div>ではなく、<body>問題を引き起こすと思われる です。

CSS3 プロパティを使用してみましたが、次のbackground-size: coverような 2 つの画像が表示されます (幅は正しいが、高さが十分ではありません)。

も使用してみましbackground-size: containたが、次のように表示されます（幅が十分ではないため、高さが十分ではありません）：

画像を次のように表示しようとしています。

これが私がセットアップしたJSFiddleです。

を広くするだけでなく、高さを自動スケーリングするにはどうすればよい<div>ですか?171px

画像の寸法は不明です。画像は の形式である必要<div style="background-image: url('base64')">があります(<img src="base64">転送先の CLI プログラムの制限によるものではありません) が、他の HTML または CSS を変更できます。

また、JavaScript を使用して高さを計算してみました。それはうまく<div>いきますが、 は実際には最後にサイズ変更されません:

var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++)
{
    var img = new Image();
    img.src = divs[i].style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2');
    var ratio = img.width / 171;
    var height = Math.floor(img.height / ratio);
    alert(height);
    divs[i].height = height;
}

JavaScript を使用して更新された JSFiddleを次に示します。

4

3 に答える 3

0

JSオプションで動作させました。divs[i].style.height = height + 'px'代わりに使用する必要がありましたdivs[i].height = height：

window.onload = function()
{
    var divs = document.getElementsByTagName('div');
    for(var i = 0; i < divs.length; i++)
    {
        var img = new Image();
        img.src = divs[i].style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2');
        var ratio = img.width / 171;
        var height = Math.floor(img.height / ratio);
        divs[i].style.height = height + 'px';
    }
}

これは動作中の JSFiddleです。

ただし、純粋なCSS3でこれが可能かどうかはまだ知りたいです。そう思うでしょう！

コードをさらに改良しました。171px現在、幅よりも小さい画像は引き伸ばされていません。

window.onload = function()
{
    var divs = document.getElementsByTagName('div');
    for(var i = 0; i < divs.length; i++)
    {
        var img = new Image();
        img.src = divs[i].style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2');

        if(img.width > 170)
        {
            var ratio = img.width / 171;
            var height = Math.floor(img.height / ratio);
        }

        else
        {
            var height = img.height;
            divs[i].style.backgroundSize = 'auto';
            divs[i].style.backgroundPosition = 'center';
        }

        divs[i].style.height = height + 'px';
    }
}

これが最後の Fiddleです。

于 2013-07-18T06:03:45.903 に答える
-1

<img src='base64'/>div 要素内に追加できない理由があれば、cssdiv{background: 0px 0px}で div の背景を非表示にして、img{width:171px}? 変更されたjsFiddleを参照してください。imgこれで問題は解決しますが、タグを追加できるかどうかはわかりません。お知らせください。別の解決策が見つかるかどうかを確認します。

于 2013-07-18T05:49:39.623 に答える
-1 
.divname img {
    height: auto;
    width: 171px;

}

そして、html の場合は次のようにします。

    <div class="divname"><img src="image.jpg"></div>
于 2013-07-18T05:50:57.463 に答える