用于在较小设备中从左侧缩小图像的 CSS

【问题标题】：CSS for shrinking image from left in smaller devices用于在较小设备中从左侧缩小图像的 CSS
【发布时间】：2021-01-14 00:51:45
【问题描述】：

在响应式网站中，当图像横向缩小以适合较小的设备时，它会通过在右侧被切断时保持左侧固定来实现这一点。有没有办法做相反的事情？修右修左？

【问题讨论】：

标签： css image responsive-design

【解决方案1】：

您可以使用背景代替图像并设置background-position: right

这是一个简短的演示

div {
  
  width: 200px;
  height: 200px;
  background-image: url('https://picsum.photos/400/200');
}

#left {
  background-position: left; /* this is the default value */
}

#right {
  background-position: right;
}

<img src="https://picsum.photos/400/200" alt="">
<div id="left"></div>
<div id="right"></div>

【讨论】：

【解决方案2】：

使用背景位置：右；要么从 Unsplash 下载较小版本的图片

【讨论】：