缩放窗口大小时从左侧裁剪图像

Question

当前情况：我正在使用引导程序，并且有 2 列彼此相邻。当我缩放浏览器窗口时，图像会随之缩放。

Section on a large display

Section on a smaller screen

问题：当我缩放浏览器窗口时，我正在处理的图像响应式缩放。

我想要什么：确保图像与 div 保持全高并从左侧裁剪。

Answer 1

在最简单的情况下，您可以将图像显示为背景并使用各种属性来确保它始终固定在右侧，全高，因此随着窗口尺寸的减小从左侧裁剪。

.image {
  width: 50vw;
  height: 50vh;
  background-image: url(https://i.stack.imgur.com/SepTG.png);
  background-size: auto 100%;
  background-position: right center;
  background-repeat: no-repeat no-repeat;
}

<div class="image"></div>

注意：对于更现代的浏览器，您可以考虑使用 img 元素和 object-fit 代替，但这不适用于 Internet Explorer。