图像具有100％的高度并向左右延伸

我在寻找CSS（首选）或javascript/jquery，其中我有一个图像的高度为100%。图像应保持宽高比，如果屏幕宽度小于图像宽度，则应从左侧和右侧平均裁剪。基本上，图像应在div图像具有100％的高度并向左右延伸

2017-04-14 codeNinja

它是否必须是'img'？ 'background-size'可以使用'cover'或'contain'这听起来像你要去的东西。 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size这里是一个例子http://codepen.io/anon/pen/jmEdME –

居中试试吧裁剪图像的object-fit:cover;。

#image { 
    width: 100%;; 
    height: 200px; 
    object-fit:cover 
}

加上@media你可以调整图像到你的屏幕分辨率。

来源

2017-04-14 23:23:40

值得注意的是，根本不起作用在IE浏览器http://caniuse.com/#feat=object-fit –

他要求“一个”解决方案，这是我能想到的速度，IE是一个不同的问题。此外，他没有包含他想要的其他浏览器。 –

这是一个有效的答案，而不是试图暗示其他 - 我只是值得注意，它可能不是当前的生产解决方案。 –

尝试Flexbox的：

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.image { 
 
    flex: 0 1 auto; 
 
}

<div class="container"> 
 
    <img class="image" src="http://blog.conservation.org/wp-content/uploads/2014/06/ci_19290600_cropped.jpg" /> 
 
</div>

你可以把该图像作为DIV的背景：

.image { 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    height: 500px; /* whatever you need */ 
 
}

<div class="image" style="background-image: url(http://blog.conservation.org/wp-content/uploads/2014/06/ci_19290600_cropped.jpg);"></div

来源

2017-04-15 00:09:58

图像具有100％的高度并向左右延伸

回答

相关问题