Question

我想用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>

Answer 1

仅使用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来面对您可能遇到的所有情况。

案例1：图像比率大于容器
使用height:100%;和width:auto;，然后您需要再次使用JS将图像置于容器中心。

案例2：图像比率高于容器
使用width:100%;和height:auto;，然后使用JS或display:table; / display:table-cell将图像垂直居中放在容器中。

我在某些项目中使用过这种技术，但与background CSS技术相比，它非常繁重。

Answer 2

您可以设置图像宽度和高度

### please Try It: http://jsfiddle.net/q9jFx/3/

Answer 3

您可以为div提供背景并设置<img>，而不是background-size: cover。

的CSS：

background-image: url("yourimage"); background-size:cover; background-position:center center;

Answer 4

如果您不一定需要使用图像标记，则使用图像作为容器的背景可以轻松地执行您想要的操作。

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;
}

Answer 5

您可以使用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%;
}

DEMO：http://jsfiddle.net/q9jFx/27/

一些其他演示如果这让你感到好奇：http://codepen.io/gcyrillus/pen/etxky，http://codepen.io/gcyrillus/pen/BdtEj，http://codepen.io/gcyrillus/pen/hyAmd（3种不同的缩放/裁剪img测试），在基本滑块{{ 3}}，测试imgvs bg http://codepen.io/gc-nomade/pen/Hdpku

Answer 6

我可以想到一种方式（也许还有其他方式？）。使用否定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%); 
}

演示：http://jsfiddle.net/q9jFx/4/

所以诀窍是将图像设置为相对于中心的容器（顶部和左侧50％），然后使用translateY（-50％）`移动图像。

Support也很不错。它是IE9 +（使用IE9的-ms前缀）和所有现代浏览器。

使用CSS调整图像大小和裁剪图像

6 个答案:

演示：http://jsfiddle.net/q9jFx/4/