>最重要的是：它必须保持纵横比
>不得裁剪
>必须水平和/或垂直拉伸(不改变纵横比)以覆盖最大可能空间
>图像和视口的大小未知
>它必须居中
>不得使用js
>元素必须是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做的是：拉伸宽度和/或高度以适应可用空间,保持纵横比
解决方法
所需的更改是：
>创建一个新的.centerImage css规则.溢出：隐藏;确保图像不会溢出容器.位置：相对;因为子img需要绝对相对于容器定位,所以是必需的.
>创建一个新的.centerImage img css规则.最大高度：100％;和最大宽度：100％确保纵横比保持不变.将bottom,left,right和top设置为0,margin：auto;使图像居中.
>将centerImage类添加到包含div.
>将.fill-vertical更改为高度：100％;这将使img填充垂直空间.
>将.fill-horizontal改为宽度：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,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,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>
@L_403_1@
除了上述更改之外,还可以使用CSS属性object-fit来实现此目的
要做到这一点,你需要：
>添加对象：包含;到图像
>将高度和宽度设置为100％
唯一需要注意的是浏览器支持,因为虽然Firefox,Chrome,Safari和Opera已经支持IE,但是IE和Edge不支持这种情况,并且需要填充或回退.
.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>
