设置position:relative/absolute后图片消失或宽度归零的问题咨询

首先，咱们先找出你代码里的几个关键问题，这是导致图片异常的核心原因：

1. CSS选择器错误 #

你写的 img #target 是后代选择器，它会试图匹配img标签内部的id="target"元素，但实际上target就是img本身的id，正确的写法应该是 img#target（去掉空格）—— 这就导致你写的transform等样式根本没生效到目标图片上！

2. 父容器尺寸塌陷 #

你的.image容器没有设置任何宽高，而里面的img用了position: absolute（脱离文档流），这会让.image的高度直接变成0，进而.img-control的高度也被压缩，看起来图片就“消失”了。

3. 重复且冲突的宽度设置 #

CSS里.img-control img已经定义了max-width:100%和width:auto，但你又在HTML的img标签里加了width:100%和width:670px的内联样式，多重冲突的宽度规则会让浏览器的渲染逻辑混乱，导致宽度计算异常。

修复后的代码示例 #

修正后的CSS #

.article { border: 1px solid red; padding: 0; display: flex; }
.article-content { border: 1px solid black; width: 46.66%; text-align: left; align-self: center; margin-left: auto; }
.img-control { border:1px solid black; max-width: 53.66%; margin-right: auto; margin-left: 1rem; overflow: hidden; position: relative; /* 把relative移到CSS里，不要写内联 */ }
/* 去掉冗余的.image类，直接让img-control作为图片的定位容器 */
.img-control img { display: block; max-width: 100%; width: auto; }
/* 修正选择器，确保样式生效 */
img#target { 
  transform: scale(2.2) translate(-35%, 29%) rotate(-25deg); 
  width: 670px; 
  display: block; 
  position: absolute; 
  right: -48px; 
  top: -18px;
}
@media only screen and (max-width:480px) { 
  .article { flex-flow: wrap column; } 
  .article-content, .img-control { margin: 0 auto; width: 100%; }
}

简化后的HTML #

<div class="article">
  <div class="article-content">
    <h3 class="mainTitle">What is Lorem Ipsum?</h3>
    <h5 class="subTitle">Lorem Ipsum</h5>
    <p> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
  </div>
  <div class="img-control">
    <!-- 去掉冗余的.image容器，把内联样式移到CSS里 -->
    <img src="http://via.placeholder.com/466x585" alt="" id="target" />
  </div>
</div>

更灵活的JS/jQuery实现方案 #

如果你的图片尺寸不固定，或者需要批量处理这类特殊样式的图片，用JS动态计算参数会更靠谱，避免硬写数值：

jQuery版本 #

$(document).ready(function() {
  const $targetImg = $('#target');
  const imgWidth = $targetImg.width();
  const imgHeight = $targetImg.height();
  const parentWidth = $targetImg.parent().width();
  
  // 动态计算缩放和位移参数（这里可以根据你的需求调整比例）
  const scaleRatio = 2.2;
  const translateX = -((imgWidth * scaleRatio - parentWidth) / 2 / scaleRatio);
  const translateY = -18; // 可以根据需求调整
  
  // 应用样式
  $targetImg.css({
    position: 'absolute',
    transform: `scale(${scaleRatio}) translate(${translateX}px, ${translateY}px) rotate(-25deg)`,
    width: `${imgWidth}px`,
    right: '0',
    top: '0'
  });
  
  // 给父容器设置最小高度，防止塌陷
  $targetImg.parent().css('min-height', `${imgHeight * scaleRatio}px`);
});

原生JS版本 #

document.addEventListener('DOMContentLoaded', function() {
  const targetImg = document.getElementById('target');
  const imgWidth = targetImg.offsetWidth;
  const imgHeight = targetImg.offsetHeight;
  const parentElement = targetImg.parentElement;
  const parentWidth = parentElement.offsetWidth;
  
  const scaleRatio = 2.2;
  const translateX = -((imgWidth * scaleRatio - parentWidth) / 2 / scaleRatio);
  const translateY = -18;
  
  targetImg.style.position = 'absolute';
  targetImg.style.transform = `scale(${scaleRatio}) translate(${translateX}px, ${translateY}px) rotate(-25deg)`;
  targetImg.style.width = `${imgWidth}px`;
  targetImg.style.right = '0';
  targetImg.style.top = '0';
  
  parentElement.style.minHeight = `${imgHeight * scaleRatio}px`;
});

这个方案的好处是：不需要硬写固定的像素值，能根据图片和父容器的实际尺寸自动调整，适配不同的屏幕尺寸，也方便批量修改。

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