当我更改浏览器的大小时，如何使图像自动裁剪而不是缩小

Question

我目前有一个图像，我希望中心保持不变并填充部分。当浏览器的像素宽度较大时，图像的中心位置会很好。但是，当我调整浏览器的大小时，图像的中心会缩小以适应图像的其余部分。是否可能必须创建一种响应方式来裁剪图像。我已经在所附的图片中勾画出了我需要的东西当我调整浏览器大小时，框架的中心(船)需要保持不变，而图像的侧面(树)需要裁剪出

非常感谢您的帮助！

Answer 1

您可以使用背景图像在div中添加图像，并提供高度和宽度并设置background-size:contain;

示例：

width: 100%;
height: 80%;
background-image: url('gueesthenumber.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;