我正在构建一个单页面应用程序。在其中一个视图中，我想要显示一个必须占用尽可能多的可用空间的图像：
img元素，不能使用背景 - 我已经有了背景（在容器中）例如，假设图像为100px x 100px，并且我们有500px x 300px的容器。然后将图像拉伸到300px x 300px，并水平居中，以便在两侧留下100px作为填充。
这可能吗？
这是我未完成的code 我想要完成的事情。
.container1 {
width: 500px;
height: 300px;
border: 2px;
border-color: red;
border-style: solid;
}
.container2 {
width: 300px;
height: 500px;
border: 2px;
border-color: blue;
border-style: solid
}
.fill-vertical {
border: 2px;
border-style: solid;
border-color: green;
display: block;
max-width: 100%;
}
.fill-horizontal {
width: 100%;
border: 2px;
border-style: solid;
border-color: green;
} <h1>Container 1, 500px x 300px, not filled</h1>
<div class="container1">
<img src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>
<h1>Container 1, filled vertically (should be horizontally centered)</h1>
<div class="container1">
<img class="fill-vertical" src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>
<h1>Container 300px x 500px, not filled</h1>
<div class="container2">
<img class="fillIt" src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>
<h1>Container 300px x 500px, filled horizontally, should be vertically centered</h1>
<div class="container2">
<img class="fill-horizontal" src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>
在该代码中，我被迫对图像使用不同的类，这取决于我是想垂直拉伸还是水平拉伸，但实际上我希望CSS自动执行此操作：只需要定义一个拉伸类
简而言之，我想让CSS做的是：拉伸宽度和/或高度以适应可用空间，保持纵横比
答案 0 :(得分：8)
所需的更改是：
.centerImage css规则。 overflow: hidden;确保图像不会溢出容器。 position: relative;是必需的，因为子img需要绝对相对于容器定位。.centerImage img css规则。 max-height: 100%;和max-width: 100%可确保宽高比保持不变。将bottom，left，right和top设置为0和margin: auto;会使图像居中。centerImage类添加到包含div s。.fill-vertical更改为height: 100%;，这会使img填充垂直空间。.fill-horizontal更改为width: 100%;，这会使img填充水平空间。
.container1 {
border: 2px;
border-color: red;
border-style: solid;
height: 300px;
width: 500px;
}
.container2 {
border: 2px;
border-color: blue;
border-style: solid;
height: 500px;
width: 300px;
}
.fill-vertical {
height: 100%;
}
.fill-horizontal {
width: 100%;
}
.centerImage {
display: block;
overflow: hidden;
position: relative;
text-align: center;
}
.centerImage img {
bottom: 0;
left: 0;
margin: auto;
max-height: 100%;
max-width: 100%;
position: absolute;
right: 0;
top: 0;
}<h1>Container 1, 500px x 300px, not filled</h1>
<div class="container1 centerImage">
<img src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>
<h1>Container 1, filled vertically (should be horizontally centered)</h1>
<div class="container1 centerImage">
<img class="fill-vertical" src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>
<h1>Container 300px x 500px, not filled</h1>
<div class="container2 centerImage">
<img src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>
<h1>Container 300px x 500px, filled horizontally, should be vertically centered</h1>
<div class="container2 centerImage">
<img class="fill-horizontal" src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>
http://jsbin.com/bupuwohica/2/
object-fit 要做到这一点，你需要：
object-fit: contain;添加到图片height和width设置为100% 唯一需要注意的是浏览器支持，因为Firefox，Chrome，Safari和Opera已经支持IE，而IE则不支持，并且需要填充或后备。
.container {
border: 2px solid red;
height: 200px;
overflow: hidden;
resize: both;
width: 300px;
}
img {
object-fit: contain;
height: 100%;
width: 100%;
}<p>The below div is resizable, drag the bottom right corner to see how the image scales</p>
<div class="container">
<img alt="" src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0" />
</div>
答案 1 :(得分：2)
这是一种方法，依靠background-size。这会根据需要使用img标记，但可见图形会作为背景加载，以利用可用的css规则。
.container {
background-color: #edc;
position: relative;
margin: 2em;
}
.container img {
display: block;
width: 100%;
height: 100%;
background-image: url(http://www.clipartbest.com/cliparts/yck/eXb/yckeXboMi.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#c1 {
width: 400px;
height: 100px;
}
#c2 {
width: 400px;
height: 600px;
}<div id="c1" class="container">
<img src="">
</div>
<div id="c2" class="container">
<img src="">
</div>
以下是有关背景大小的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
答案 2 :(得分：0)
是的，这完全有可能。您只需要确保对X或水平和Y或垂直限制的可能最大尺寸有“限制”或限制。一旦知道最大尺寸，就可以将这些常数与之进行比较。我所知道的最简单的方法是将X和Y作为向量进行比较，以便您可以看到它们的变化。在这一点上，让它居中也很容易：
(((horizontalScreenLimit - widthOfImage)/2), ((verticalScreenLimit - heightOfImage)/2)')