（背景以外の）画像をトリミングしてから、トリミングした画像を体のパーセンテージでスケーリングしようとしています。私が持っているアイデアは、ブラウザが画像をキャッシュできるように、Webサイト上のすべてのロゴと基本的なグラフィックを1つの画像に結合することです（最初のダウンロード後はより速く）。次に、ユーザーのモニターサイズに関係なく、Webサイトがページ幅と同じ比率で表示されるように、本文の幅に対してスケーリングします。
これは、htmlとcssを指定して、後で説明すると簡単になる場合があります。
<html>
<head>
<style>
body
{
padding: 0px;
margin: 0px;
width: 100%
}
#crop1
{
float: left;
overflow: hidden;
border: 1px solid red;
clear: both;
}
#crop1 img
{
vertical-align: middle;
margin: -28px 0px -88px -189px; /*top right bottom left*/
}
#scale1
{
width: 10%;
border: 1px solid blue;
}
#scale1 img
{
vertical-align: middle;
width: 100%;
}
#crop2
{
float: left;
overflow: hidden;
border: 1px solid green;
width: 100%;
}
#crop2 img
{
vertical-align: middle;
margin: -28px 0px -88px -189px; /*top right bottom left*/
}
#scale2
{
width: 10%;
border: 1px solid orange;
clear: both;
}
</style>
</head>
<body>
<img src="http://www.mathleague.com/help/geometry/IMG00088.gif">
<div id="scale1"><img src="http://www.mathleague.com/help/geometry/IMG00088.gif"></div>
<div id="crop1"><img src="http://www.mathleague.com/help/geometry/IMG00088.gif"></div>
<div id="scale2"><div id="crop2"><img src="http://www.mathleague.com/help/geometry/IMG00088.gif"></div></div>
</body>
</html>
http://www.mathleague.com/help/geometry/IMG00088.gifこの例では画像を使用しました。この画像を自分のWebサイトで使用するつもりはありませんが、原則は同じです。
したがって、最初に、デバッグ中にサイズの参照を提供するために、元の画像を変更せずに配置します。
<img src="http://www.mathleague.com/help/geometry/IMG00088.gif">
別の画像をページ幅の10％まで縮小すると、正常に機能します。
<div id="scale1">
<img src="http://www.mathleague.com/help/geometry/IMG00088.gif">
</div>
また、画像を切り抜いて楕円形だけを表示することもできます。
<div id="crop1">
<img src="http://www.mathleague.com/help/geometry/IMG00088.gif">
</div>
しかし、楕円だけをページ幅の10％まで縮小することはできません。
<div id="scale2">
<div id="crop2">
<img src="http://www.mathleague.com/help/geometry/IMG00088.gif">
</div>
</div>
（これにより、楕円が拡大縮小されるのではなく、10％の幅に切り取られます）。divこの最後の行にいくつかの単純なcssプロパティがないか、さらにsを追加する必要があるかもしれません。私は立ち往生しています。
画像の例を次に示します。
注：ソリューションはクロスブラウザー互換である必要があります
