如何在网页中定位hero image实现左侧固定右侧贴合页面边缘

解决方法 #

你出现这个问题的核心是手动固定了图片宽度，同时定位参数冗余冲突，调整方案如下：

1. HTML无需修改，保持原有代码即可

<img alt="" class="zoom-image-head__abtbg" src="asset/img/about-page-bg.jpg" />

2. 替换为如下CSS代码

.zoom-image-head__abtbg{
  position: absolute;
  left: 5vw;
  right: 0;
  bottom: 0;
  height: 111vh;
  object-fit: cover;
  object-position: left top;
}

3. 代码说明

• 用left:5vw固定左侧位置，和你之前要的左侧边距效果完全一致，right:0直接让图片右侧贴合页面右边缘，无需手动设置宽度，也不会出现拉伸变形的问题
• 删掉了冗余属性：background-position是背景图属性，对img标签无效，display:flex、margin-left、固定width、错误的object-position都属于冲突冗余参数，直接移除即可
• object-fit:cover会保持图片原有宽高比，自动裁剪溢出部分，不会出现拉伸变形
• 如果最终显示的图片内容区域和目标效果有偏差，调整object-position的参数即可，比如要让图片内容整体右移一点可以写成object-position: 10% top，根据实际显示效果调整数值就行。

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