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

Question

在响应式网站中，当图像宽度方向缩小以适应较小的设备时，它会保持左侧固定，同时截掉右侧。有没有一种方法可以做相反的事情？修右削左？

Answer 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>

Answer 2

使用 background-position：对；要么从 Unsplash 下载缩小版的图片

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

CSS for shrinking image from left in smaller devices

css

image

responsive-design