作業中のHTMLの画像サイズの問題は、画面解像度である

Question

画面の残りの部分はメニューなので、幅70％、高さ90％の小さなアプリケーションを実行しています。

この領域では問題のない画像をエコーする必要がありますが、画像が大きすぎるとオーバーフローが発生します。イメージの元のサイズが何であるかに応じてイメージの固定プロパティを設定すると、イメージの品質や外観が破壊されます。誰かが、画像の品質をあふれさせたり破壊したりせずに、どのように画像をエコーすることが可能か教えてください。

Facebookの画像ビューアの仕組みに沿ったもの。

Answer 1

その後、幅と高さの両方を制限しないでください。

一方または他方を制限し、比率に応じてブラウザのサイズを変更させます。 100x100イメージのサイズを60x2に変更するようにブラウザに指示すると、何が問題になってもひどく見えます。しかし、画像の高さを60に変更するようにブラウザに指示すると、画像の縦横比を維持するために幅60が自動的に作成され、ゆがんだりしません。

イメージギャラリーを使用する場合は、できます。ここでは、簡単なgoogleからfacebookのものと似ているものがあります：http://phpimagegallery.com/