49

JavaScriptを使用して画像を比例的にサイズ変更する方法を知っている人はいますか？

height属性を追加してその場でDOMを変更しようとしwidthましたが、IE6では機能しなかったようです。

4

13 に答える 13

71

画像を比例的に変更するには、幅/高さのcssプロパティの1つだけを変更し、もう1つはautoに設定したままにします。

image.style.width = '50%'
image.style.height = 'auto'

これにより、アスペクト比が同じに保たれます。

ブラウザは画像のサイズ変更をうまく行う傾向があることに注意してください。サイズ変更された画像はひどいものに見えるかもしれません。

于 2008-10-04T16:47:26.577 に答える
19

解決しました。これが私の最終的なコードです

if($(this).width() > $(this).height()) { 
 $(this).css('width',MaxPreviewDimension+'px');
 $(this).css('height','auto');
} else {
 $(this).css('height',MaxPreviewDimension+'px');
 $(this).css('width','auto');
}

みんなありがとう

于 2008-10-04T17:15:22.467 に答える
8

ここでこの質問に答えました：画像を比例的にサイズ変更する方法/アスペクト比を維持する方法は？. 私はそれが非常に信頼できる方法だと本当に思うので、ここにコピーしています:)

 /**
  * Conserve aspect ratio of the original region. Useful when shrinking/enlarging
  * images to fit into a certain area.
  *
  * @param {Number} srcWidth width of source image
  * @param {Number} srcHeight height of source image
  * @param {Number} maxWidth maximum available width
  * @param {Number} maxHeight maximum available height
  * @return {Object} { width, height }
  */
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
 }
于 2013-10-20T04:16:28.420 に答える
6

画像の高さと幅の属性を変更する代わりに、CSSの高さと幅を変更してみてください。

myimg = document.getElementById('myimg');
myimg.style.height = "50px";
myimg.style.width = "50px";

一般的な「落とし穴」の1つは、高さと幅のスタイルが、上記の例の「px」のように、単位を含む文字列であるということです。

編集-style.heightとstyle.widthを使用する代わりに、高さと幅を直接設定すると機能すると思います。また、元の寸法をすでに持っているという利点もあります。コードを少し投稿できますか？クァークズモードではなく標準モードになっていますか？

これは機能するはずです：

myimg = document.getElementById('myimg');
myimg.height = myimg.height * 2;
myimg.width = myimg.width * 2;
于 2008-10-04T16:44:52.667 に答える
4

次のコードを試し、WinXPProSP3のIE6で問題なく動作しました。

function Resize(imgId)
{
  var img = document.getElementById(imgId);
  var w = img.width, h = img.height;
  w /= 2; h /= 2;
  img.width = w; img.height = h;
}

FF3とOpera9.26でもOKです。

于 2008-10-04T16:52:47.457 に答える
3

例: パーセントでサイズを変更する方法

<head>
    <script type="text/javascript">
        var CreateNewImage = function (url, value) {
            var img = new Image;
            img.src = url;
            img.width = img.width * (1 + (value / 100));
            img.height = img.height * (1 + (value / 100));

            var container = document.getElementById ("container");
            container.appendChild (img);
        }
    </script>
</head>
<body>
    <button onclick="CreateNewImage ('http://www.medellin.gov.co/transito/images_jq/imagen5.jpg', 40);">Zoom +40%</button>
    <button onclick="CreateNewImage ('http://www.medellin.gov.co/transito/images_jq/imagen5.jpg', 60);">Zoom +50%</button>
    <div id="container"></div>
</body>
于 2012-12-18T17:21:27.433 に答える
3

これはすべてのケースで機能します。

function resizeImg(imgId) {
    var img = document.getElementById(imgId);
    var $img = $(img);
    var maxWidth = 110;
    var maxHeight = 100;
    var width = img.width;
    var height = img.height;
    var aspectW = width / maxWidth;
    var aspectH = height / maxHeight;

    if (aspectW > 1 || aspectH > 1) {
        if (aspectW > aspectH) {
            $img.width(maxWidth);
            $img.height(height / aspectW);
        }
        else {
            $img.height(maxHeight);
            $img.width(width / aspectH);
        }
    }
}
于 2014-03-28T14:29:51.913 に答える
2

Javascriptでそれを行う必要はありません。CSSクラスを作成して、タグに適用するだけです。

.preview_image{
        width: 300px;
    height: auto;
    border: 0px;
}
于 2012-03-15T21:13:00.650 に答える
1

JQuery を使用する

var scale=0.5;

minWidth=50;
minHeight=100;

if($("#id img").width()*scale>minWidth && $("#id img").height()*scale >minHeight)
{
    $("#id img").width($("#id img").width()*scale);
    $("#id img").height($("#id img").height()*scale);
}
于 2010-03-08T21:34:21.767 に答える
1

これを試して..

<html>
<body>
<head>
<script type="text/javascript">
function splitString()
{
var myDimen=document.getElementById("dimen").value;
var splitDimen = myDimen.split("*");
document.getElementById("myImage").width=splitDimen[0];
document.getElementById("myImage").height=splitDimen[1];
}
</script>
</head>

<h2>Norwegian Mountain Trip</h2>
<img border="0" id="myImage" src="..." alt="Pulpit rock" width="304" height="228" /><br>
<input type="text" id="dimen" name="dimension" />
<input type="submit" value="Submit" Onclick ="splitString()"/>

</body>
</html>

テキスト ボックスに、ご希望のサイズを 50*60 の形式で入力します。[送信] をクリックします。リサイズされた画像が得られます。イメージ タグのドットの代わりにイメージ パスを指定します。

于 2012-01-19T07:27:34.967 に答える
0

JavaScriptで画像のサイズを変更するには： 

$(window).load(function() {
mitad();doble();
});
function mitad(){ 

    imag0.width=imag0.width/2;
    imag0.height=imag0.height/2;

    }
function doble(){ 
  imag0.width=imag0.width*2; 
  imag0.height=imag0.height*2;}

imag0 はイメージの名前です。

 <img src="xxx.jpg" name="imag0">
于 2013-07-08T16:19:09.917 に答える
0

これが私のカバー塗りつぶしソリューションです（background-size: coverに似ていますが、古いIEブラウザーをサポートしています）

<div class="imgContainer" style="height:100px; width:500px; overflow:hidden; background-color: black">
    <img src="http://dev.isaacsonwebdevelopment.com/sites/development/files/views-slideshow-settings-jquery-cycle-custom-options-message.png" id="imgCat">
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script>
    $(window).load(function() {
        var heightRate =$("#imgCat").height() / $("#imgCat").parent(".imgContainer").height();
        var widthRate = $("#imgCat").width() / $("#imgCat").parent(".imgContainer").width();

        if (window.console) {
            console.log($("#imgCat").height());
            console.log(heightRate);
            console.log(widthRate);
            console.log(heightRate > widthRate);
        }
        if (heightRate <= widthRate) {
            $("#imgCat").height($("#imgCat").parent(".imgContainer").height());
        } else {
            $("#imgCat").width($("#imgCat").parent(".imgContainer").width());
        }
    });
</script>
于 2015-07-01T08:16:38.510 に答える
0 
function resize_image(image, w, h) {

    if (typeof(image) != 'object') image = document.getElementById(image);

    if (w == null || w == undefined)
        w = (h / image.clientHeight) * image.clientWidth;

    if (h == null || h == undefined)
        h = (w / image.clientWidth) * image.clientHeight;

    image.style['height'] = h + 'px';
    image.style['width'] = w + 'px';
    return;
}

img DOM 要素、または image 要素の ID、そして新しい幅と高さのいずれかを渡すだけです。

または、幅だけまたは高さだけを渡すことができます（高さだけの場合は、幅をnullまたは未定義として渡します）。アスペクト比を維持してサイズが変更されます

于 2009-06-23T16:06:43.207 に答える