巨大なピクセル画像を所定の幅と高さに合わせる

Question

画像とそのピクセルのprobem.wellで問題が発生しました。私には2448 x 3264ピクセルの画像があります。私はちょうどこのよう

<img src="1.jpg" style="width:600px;height:500px"/> 

を使用して、そのサイズを小さくすることを決めた。しかし、私が見る問題があり、絵はその明快さとその可視性を失い近いと中の人にそれを引っ張るようなので、それはその大きな画像になります画像はとても醜いように見えますが、元のサイズを使用すると非常に大きく見えます。私はGoogleの画像の結果を表示し、またいくつかのウェブサイトで私は自分のコードを見てみたが、それを把握できなかったので、行う方法があると確信しています。

誰も私に教えてくださいどのように私は彼らがあまりにも長い解像度を得て、それらが所定の幅に収まるように画像が良く見えるように教えてもらえますか？

更新

オーケー、今私たちはいくつかのサーバー側の画像処理を必要と理解し、誰もがそれを行う方法であるものを私に言うことができるのおかげ

Answer 1

最も広く使用されている方法は、イメージサーバー側のサイズを変更することです。画像がサーバに（例えばユーザによって）アップロードされると、サーバは画像を取り込み、必要なサムネイルを作成して作成する。

残念ながら、これはHTML、CSS、またはJavaScriptで行うことはできません。 CSSを使用してイメージのサイズを強制するという点で多くの問題があります。たとえば、ユーザーは画像全体をダウンロードする必要があります（私はあなたが約6MBだと思います）、時間がかかることがあります。

Answer 2

をあなたがそれを行うカント任意の言語Withourかイメージを編集してホストにアップロードする必要があります。

Answer 3

プレーンhtmlを使用してみてください。あなたは、より多くの何か、HTMLのみを必要とする、より良い品質を得るために

<img src="1.jpg" width="375" height="500"/> 

Answer 4

：（この場合は、3：4）の高さの比：

ので、あなたは右の幅を持っている場合にも役立ちます。手動でイメージのサイズを変更する必要があります。レンダリングする前にイメージを準備するためにサーバー側のスクリプトを使用してください（特定の次元について確信している場合はアップロードすることをお勧めします）。

Answer 5

必要なものは、サーバー側の画像処理です。あなたのserwerプラットフォームに応じて、explele phpThumbまたは別の実装の場合。

例：

<img src="../phpThumb.php?src=1.jpg&w=600" /> 

phpThumbはSRC渡された画像を開き、 wは渡された幅にサイズを変更します - ブラウザに飛ぶ出力で>プロセスイメージ。

Answer 6

画質を維持するために、アスペクト比を維持する必要があります。アスペクト比は画像の幅/高さの比であり、比率を維持しながら画像のサイズを変更すると、その透明度が維持されます。 2448/3264！= 600/500なので、サイズ変更された画像が乱れることになります。

幅または高さのいずれかの属性のみを指定した場合、Nowタグは縦横比でサイズを変更します。例：

<img src="your_src" width=600> 

これはアスペクト比の維持をレンダリングします（必要な高さを計算します）。しかし、divが最大高さを持つ場合、再計算された高さがdivの高さを超えてしまう可能性があるため、最大高さ制約があると問題が発生することがあります。

あなたは、最大高さおよび最大幅の制約がある場合は、JSを使用して画像のサイズを変更するには、次のコードを使用することができます。私は、それぞれ600PXと500pxなどとしてその最大幅および最大高さの値を仮定していますし、あなたのニーズに従って変更することができます。

height = this.clientHeight; 
width = this.clientWidth; 

aspectRatio = width/height; 
if (height > width) 
{ 
    height = 500; 
    width = height * aspectRatio; 
} 
else if (width > height) 
{ 
    width = 600; 
    height = width/aspectRatio; 
} 
this.setAttribute("height", height+"px"); 
this.setAttribute("width", width+"px");