高度为100％并向右和向左延伸的图像

Question

我正在寻找CSS（首选）或javascript / jquery，其中我有一个高度为SafeHandles的图像。图像应保持纵横比，如果屏幕宽度小于图像宽度，则应从左右均匀裁剪。基本上图像应该以{{1​​}}

为中心

Answer 1

尝试object-fit:cover;裁剪图像。

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

加上@media，您可以根据屏幕分辨率调整图像。

Answer 2

1. 试用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>

1. 您可以将图像作为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