我正在尝试裁剪（非背景）图像，然后将裁剪后的图像按身体的百分比进行缩放。我的想法是将我网站上的所有徽标和基本图形组合成一个图像，以便浏览器可以缓存图像（第一次下载后更快）。然后，我想相对于正文宽度进行缩放，这样无论用户的显示器尺寸如何，我的网站都会看起来与页面宽度的比例相同。
如果我给出 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在这个例子中使用了图像。我不会在我的网站上使用这张图片，但原理是一样的。
所以首先我只是把原始图像，不变的，在调试时给出大小参考：
<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% 的宽度，而不是缩放它）。也许我在最后一行缺少一些简单的 css 属性，或者我需要添加更多div的 s. 我被困住了。
这是示例图像：
注意：解决方案必须是跨浏览器兼容的
