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

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属性相结合。

看这个小提琴

这些属性的更多信息：
背景位置
背景尺寸

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

除了<img>你可以给 div 一个背景并设置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%;
}

演示：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 http://codepen.io/gcyrillus/pen/wsjBJ

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%)` 移动图像。

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

Answer 7

你想做的是

溢出：隐藏，父（容器）元素。

变换：scale(x)，img 元素

您可以将 object-position: x% x%, 添加到 img 元素以移动它

为了整洁（在 img 元素上）：Object-fit：cover； 纵横比：1/1；