如何实现仅显示图片的右侧区域？

下面提供几种实用的实现方式，根据你的场景选择即可：

方法1：使用 object-position 配合 object-fit（推荐，直接操作img标签） #

给img元素设置固定的显示宽高，通过object-position将图片右侧区域定位到可视范围内，object-fit保证图片比例不变：

<style>
  .right-only-img {
    width: 300px; /* 自定义显示宽度 */
    height: 400px; /* 自定义显示高度 */
    object-fit: cover;
    object-position: 100% center; /* 100%表示水平方向定位到最右侧 */
  }
</style>

<img src="https://wallpaperaccess.com/full/2942699.jpg" class="right-only-img">

方法2：用容器裁剪（overflow:hidden） #

将img放在一个固定宽高的容器里，通过偏移图片让右侧区域显示在容器内：

<style>
  .img-container {
    width: 300px;
    height: 400px;
    overflow: hidden; /* 隐藏容器外的内容 */
  }
  .img-container img {
    transform: translateX(-50%); /* 偏移量根据图片实际宽度调整，此处示例显示右半部分 */
    /* 也可以用 margin-left: -50%; 实现类似效果 */
  }
</style>

<div class="img-container">
  <img src="https://wallpaperaccess.com/full/2942699.jpg">
</div>

方法3：使用背景图片实现 #

把图片作为元素的背景，通过background-position定位到右侧，容器设置宽高控制显示区域：

<style>
  .bg-img {
    width: 300px;
    height: 400px;
    background-image: url('https://wallpaperaccess.com/full/2942699.jpg');
    background-position: right center; /* 定位到右侧 */
    background-size: cover; /* 保证背景图覆盖容器 */
  }
</style>

<div class="bg-img"></div>

内容的提问来源于stack exchange，提问作者nevazno_html_css_js_1