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

Question

我正在寻找CSS（首选）或javascript / jquery，其中我的图像高度为100% 。 图像应保持宽高比，并且如果屏幕的宽度小于图像的宽度，则应从左右均匀裁剪。 基本上，图像应在div居中

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> 

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