​x
 
<!DOCTYPE html>
<html>
<head>
<style>
img.a {
  width: 200px;
  height: 400px;
  object-fit: none;
  object-position: 5px 10%;
  border: 5px solid red;
}
</style>
</head>
<body>
​
<h1>object-position 属性</h1>
​
<p>调整图像的大小以适合其内容框，然后在内容框内将图像从左侧移 5px，从顶部移 10％：</p>
<img class="a" src="/i/photo/shanghai.jpg" alt="Shanghai" width="400" height="300">
​
<h2>原始图像 ：</h2>
<img src="/i/photo/shanghai.jpg" alt="Shanghai" width="400" height="300">
​
<p>注释：Internet Explorer/Edge 15 以及更早的版本不支持 object-position 和 object-fit 属性。</p>
​
</body>
</html>
​