我想调整和裁剪未知尺寸的图像，只需使用 css。应调整图像大小/裁剪图像以完全填充已知尺寸的容器，并尽可能少地切掉图像。
另外，如果图像被裁剪，那么我想确定，例如，应该显示图像的中心，而不是左上角。
我做了一个 jsfiddle 来说明这个问题：http://jsfiddle.net/q9jFx/
例如，我可以将图像宽度设置为 100%，但如果图像宽大于高，这将不起作用。
.container { width: 180px; height: 160px; overflow: hidden; border:red solid 2px }
.container img { width:100%}
<div class="container">
<img src="the_src" alt="alt" />
</div>
【问题讨论】：
可以设置图片的宽度和高度
### please Try It: http://jsfiddle.net/q9jFx/3/
【讨论】：
我能想到一种方法（也许还有其他方法？）。使用否定的translateY(-50%)：
.container {
width: 180px;
height: 160px;
overflow: hidden;
border: red solid 2px;
position: relative;
}
.container img {
position: absolute;
left: 0;
top: 50%;
width: 100%;
-webkit-transform: translateY(-50%);
}
所以诀窍是设置图像相对于中心的容器定位（顶部和左侧 50%），然后使用 translateY(-50%)` 移动图像。
Support 也不错。它是 IE9+（IE9 使用 -ms 前缀）和所有现代浏览器。
【讨论】：
你可以给 div 一个背景而不是 <img>，然后设置 background-size: cover。
css:
background-image: url("yourimage");
background-size:cover;
background-position:center center;
【讨论】：
仅使用 css 实现此目的的唯一方法是使用 CSS background 属性，将其与 background-size 和 background-position 属性结合使用。
看到这个FIDDLE
有关这些属性的更多信息：
background-position
background-size
HTML：
<div class="container" style="background-image:url(http://www.recipestap.com/wp-content/plugins/wp-o-matic/cache/af4e1_ap.jpg)"></div>
<div class="container" style="background-image:url(http://3.bp.blogspot.com/-LAfvYIuz6c4/UpQxIe-FlmI/AAAAAAAAAcE/DVeCw1W6Yu4/s320/Eggless+Mini+Apple+Pie.JPG)"></div>
CSS：
.container {
width: 180px;
height: 160px;
border:red solid 2px;
/* add following */
background-size:cover;
background-position:50% 50%;
}
其他信息
如果您出于 SEO 原因或其他原因确实需要 <img> 标签，您将需要 JS 来面对您可能遇到的所有情况。
CASE 1：图片比例比容器宽
使用height:100%; 和width:auto; 则需要再次使用JS 将容器中的图像居中。
CASE 2：图片比例高于容器
使用 width:100%; 和 height:auto; 然后 JS 或 display:table;/display:table-cell 将容器中的图像垂直居中。
我在一些项目中使用过这种技术，但与background CSS 技术相比，它相当繁重。
【讨论】：
如果你不需要一定要使用图片标签，使用图片作为容器的背景就可以轻松做你想做的事。
Jsfiddle 示例：http://jsfiddle.net/zEP9L/
HTML：
<p>Don't want the white space. Instead, should crop width to fill complete container.</p>
<div class="container">
<img src="http://www.recipestap.com/wp-content/plugins/wp-o-matic/cache/af4e1_ap.jpg" alt="alt" />
</div>
<p>This looks ok, but would like to control the crop - eg show the center of the image, not the top</p>
<div class="container">
<img src="http://3.bp.blogspot.com/-LAfvYIuz6c4/UpQxIe-FlmI/AAAAAAAAAcE/DVeCw1W6Yu4/s320/Eggless+Mini+Apple+Pie.JPG" alt="alt" />
</div>
<p>This is an alternative option</p>
<div class="container" id="something">
</div>
CSS：
.container { width: 180px; height: 160px; overflow: hidden; border:red solid 2px }
.container img { width:100%}
#something {
background-image: url("http://3.bp.blogspot.com/-LAfvYIuz6c4/UpQxIe-FlmI/AAAAAAAAAcE/DVeCw1W6Yu4/s320/Eggless+Mini+Apple+Pie.JPG");
background-size: cover;
background-position: center center;
}
【讨论】：
你可以使用 clip() 一个旧的 CSS 规则 http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/ ，但是对于已知的图像大小来说很容易。
对于未知的图像大小，但已知的容器大小，您可以使用line-height: /* height of container */; 和text-align:center; 基本上将单个内联元素置于此容器中。
然后可以将单个图像设置为：vertical-align:middle; 和负边距以实际减小其大小，例如：margin:-50%;。
对于首先太大的图像，使用最小或最大宽度高度来减小它们的大小。
.container {
width: 180px;
height: 160px;
overflow: hidden;
border:red solid 2px
}
.container {
line-height:160px;
text-align:center;
}
.container img {
vertical-align:middle;
margin: -50%;
min-width:100%;
max-height:150%;
}
演示：http://jsfiddle.net/q9jFx/27/
如果这让你好奇的话，还有其他一些演示：http://codepen.io/gcyrillus/pen/etxky、http://codepen.io/gcyrillus/pen/BdtEj、http://codepen.io/gcyrillus/pen/hyAmd（缩放/裁剪 img 的 3 种不同测试），在基本滑块 http://codepen.io/gc-nomade/pen/Hdpku 内，测试 imgvs bg @ 987654327@
【讨论】：