适配设计系统：Hero区Tablet图片偏移与缩放问题求助

你的核心问题是用scale导致屏幕缩小时图片尺寸异常，改用绝对定位+溢出隐藏的方案可以实现图片偏移右侧的效果，同时保持图片自适应：

步骤1：调整Hero区域基础布局 #

在min-width:700px的媒体查询中，修改.hero样式，开启溢出隐藏以容纳偏移的图片：

@media(min-width:700px) {
  .hero{
    display: flex;
    gap: 1.5rem;
    padding:0 1.4rem;
    margin-top: 1.5rem;
    position: relative;
    /* 新增：隐藏超出容器的横向内容，避免滚动条 */
    overflow-x: hidden;
  }

步骤2：重构图片容器与图片样式 #

删除原有scale相关错误代码，用绝对定位实现偏移：

.img-container{
    /* 移除scale和left属性，改用绝对定位 */
    position: absolute;
    top: 0;
    right: -15%; /* 控制偏移右侧的距离，可按需调整 */
    width: 60%; /* 限制容器宽度，保证图片比例 */
    height: 100%;
  }
  .tablet{
    display: inline-block;
    /* 移除错误的scale(4rem)，scale仅接受无单位比例值 */
    width: 100%;
    height: auto;
    object-fit: cover; /* 保持图片原始比例 */
  }

步骤3：优化文字容器空间分配 #

确保文字容器不被图片遮挡，调整flex属性：

.hero-container{
    /* 移除固定margin-top，改用flex控制垂直位置 */
    align-self: center; /* 垂直居中，可根据设计需求改为flex-start */
    flex-basis: 50%; /* 占用Hero区域50%宽度 */
    z-index: 1; /* 保证文字层级在图片之上 */
  }

额外代码修复 #

• HTML中<h2 class="course-header" 1>存在语法错误，应改为<h2 class="course-header">Photography</h2>
• .tablet样式中transform: scale(4rem)是错误写法，scale仅支持无单位比例值（如scale(1.2)）

效果说明 #

• 图片通过right:-15%偏移至屏幕右侧，超出Hero容器的部分被overflow-x:hidden隐藏，不会产生横向滚动条
• 图片以width:100%自适应容器宽度，结合object-fit:cover保持比例，不会因屏幕缩小出现尺寸异常
• 文字容器通过flex-basis和z-index确保视觉优先级，避免被图片遮挡

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