仅为指定图片应用CSS并解决移动端消失及适配异常问题

问题根因 #

• 你当前的样式没有设置position属性，默认值为static，此时left、top属性完全不生效，因此样式无法按预期作用在left-column区域
• 百分比高度height: 50%依赖父元素的明确高度定义，移动端父容器大概率没有设置固定高度，导致高度计算为0，图片直接消失

修复后代码 #

<img data-image="red" class="active" src="https://res.cloudinary.com/piersolutions/image/upload/v1637872858/Rolex_for_Joseph-removebg-preview-3_ajtqtu.png" id="mainRolex">

<style>
/* 给left-column设置定位上下文，承接内部绝对定位元素 */
.left-column {
  position: relative;
  min-height: 450px;
}

#mainRolex {
  position: absolute;
  /* 桌面端样式，用max-width保证自适应，height:auto维持图片比例 */
  max-width: 30%;
  height: auto;
  left: 22%;
  top: 10%;
}

/* 移动端响应式适配，断点可根据实际需求调整 */
@media (max-width: 768px) {
  #mainRolex {
    max-width: 60%;
    left: 20%;
    top: 8%;
  }
}
</style>

补充说明 #

• 如果不需要图片脱离文档流排版，可将position: absolute改为position: relative，偏移规则依然生效，且不会影响父容器高度计算
• 图片禁止同时固定宽度和高度，否则容易出现拉伸变形，固定一侧后另一侧设为auto即可维持原始比例

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