2

背景画像のサイズを取得する次の簡単なコードがありますが、div にあるスケーリングされた画像ではなく、元の画像のサイズを取得します。スケーリング後にピクセル寸法を取得したいのですが、それを行う方法はありますか?

var actualImage = new Image();
actualImage.src = $("#chBox").css('background-image').replace(/"/g, "").replace(/url\(|\)$/ig, "");
actualImage.onload = function () {
    width = this.width;
    height = this.height;
}

編集：

背景画像をスケーリングする CSS:

#chBox {
height:100%;
width:100%;
background-repeat:no-repeat;

background-image: url(../content/frog/1.jpg);
background-position: center;
    -webkit-background-size: contain; /*for webKit*/
    -moz-background-size: contain; /*Mozilla*/
    -o-background-size: contain; /*opera*/
    background-size: contain; /*generic*/

}
4

3 に答える 3

1

実際の画像の寸法を取得する代わりに、必要な画像の$('#someImage').css('width')とを取得する必要があり$('#someImage').css('height')ます。

編集：

#someImage img {
    width: 100px;
    height: auto;
}
<td id="image">
    <img id="someImage" src="image.jpg">
    <script type="text/javascript">
        alert($('#someImage').css('width'));
    </script>
</td>

上記のコードは「100px」を警告します。もちろん、jQueryを使用して画像の幅を変更すると$('#someImage').css('width','300px')、コードは更新され、「300px」と警告されます

于 2012-06-26T23:42:35.433 に答える
0

わかりました、皆さんの回答に感謝しますが、少し回避策を考えました。jQuery の今後のリリース (スケーリングされた幅、高さの取得) でこの機能を見たいと思っていますが、いくつかの計算では、それほど悪くはありません。本質的に、

            // create a fake image and load the original from background-img src
        var actualImage = new Image();
        actualImage.src = $("#chBox").css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");
        actualImage.onload = function() {
            // get original values
            var origWidth = this.width;
            var origHeight = this.height;
            var width = 0;
            var height = 0;
            // need to bump it 140px as it seems the div's left comes from the super-container
            var bump = 140;
            // if the image is fat rather than tall,
            if(origWidth > origHeight){
                // set width for description to width of bg-img container
                var width = $("#chBox").width();
                // set left
                $(".description").css("left", bump);
                // calculate height and set bottom
                height = (width * origHeight) / origWidth;
                var blankSpace = $("#chBox").height() - height;
                $(".description").css("bottom", (blankSpace/2));


            } else {
                // if image is tall,
                var height = $("#chBox").height();
                // calculate width
                width = (height * origWidth) / origHeight;
                // set left
                var setLeft = $("#chBox").width();
                $(".description").css("left", (setLeft/2) - 58);    //wtf, 58?
                // set bottom to 0
                $(".description").css("bottom", 0)
            }

            $(".description").width(width);
        }

そこにはかなりのサイト固有のものがありますが、基本的には代数を実行して画像の比率を見つけました。背の高い画像ではなく太い画像の場合、コンテナーの幅はスケーリングされた幅になります。高さは、スケーリングされた幅 * 元の画像の高さを元の画像の幅で割った値に等しくなります。何らかの理由で (誰かがこれを手伝ってくれたらありがたいです) マージン: 0 auto; div の幅を変更すると CSS のプロパティが機能しないため、手動で中央に配置する必要がありました。

于 2012-06-27T19:56:19.887 に答える
0

コードは、あなたが指示したことを実行しています。「スケーリングされた」サイズを取得する方法があるとは思いません。

于 2012-06-26T23:29:55.833 に答える