最大幅を超える画像のサイズを変更する

JavaScriptはおそらくそれを行うはずですが、私は検索しましたが、maxWidthとは何の関係もありませんでした。青からイメージのサイズ変更のみ。私はが必要何最大幅を超える画像のサイズを変更する

は、それはあまりにも大きいです場合、画像のサイズを変更するには、JavaScriptのコードの一部である（変数で定義されている。）

2011-04-13 Harry

あなたがするmax-width CSSプロパティを使用することはできませんなぜそこにいくつかの理由です何をしたい、のような：

<img src="myImage.png" style="max-width: 600px;">

...またはより良い：

<style> 
    .widthConstrained { 
     max-width: 600px; 
    } 
</style> 

... 

<img src="myImage.png" class="widthConstrained">

編集：

あなたは互換性のためにJavaScriptを使用する必要がある場合、私はあなたがそれをロードした後、全画像の幅をチェックし、必要であれば、それを取り締まる、おおよそのようにしthis questionで指定されたコードのようなものを使用することを示唆しています：

var img = $("img")[0]; // Get my img elem 
$("<img/>") // Make in memory copy of image to avoid css issues 
    .attr("src", $(img).attr("src")) 
    .load(function() { 
     if (this.width > maxWidth) { 
      $(img).width(maxWidth); 
     } 
    });

出典

2011-04-13 13:19:24 aroth

明らかに、Microsoftの愚かなIEのため、非標準に準拠したIEでは互換性がありません。コースの最大幅。 – Harry

@ハリー - さて、私はJavaScript版でも答えを更新しました。 – aroth

あなたのウェブページには<img />というタグがあります。

大きすぎる画像を縮小するには、画像ソースとaltと一緒に幅と高さの属性をIDと共に挿入します。

<head> 
    <script type="text/javascript" /> 
     function pie() 
     { 
     var pathToImage = "bla/bla/Image.jpg"; 
     document.GetElementByID(Image1).setAttribute("src",pathToImage); 
     } 
    </script> 
</head> 
<body onload=Pie() > 
    <img ID="Image1" alt="random Image" width="300px" Height="200px" /> 
</body>

出典

2011-04-13 13:20:02 Eon

mozilla firefoxはw3cに準拠していないため、document.GetelementByID（）メソッドの構文はmozilla firefoxとIEでは異なります – Eon

これは望ましくないかもしれない300x200より小さい画像も伸ばします。 – aroth

最大幅を超える画像のサイズを変更する

答えて

関連する問題