>最重要的是:它必须保持纵横比
>不得裁剪
>必须水平和/或垂直拉伸(不改变纵横比)以覆盖最大可能空间
>图像和视口的大小未知
>它必须居中
>不得使用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>
http://jsbin.com/bupuwohica/2/
除了上述更改之外,还可以使用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>