响应式站点Bootstrap列内如何将小图居中置于大图上方

AI 小北

2026-10-2

解决方案

核心修正点

类名匹配修正：HTML中包裹两张图的父容器类为father，你原有CSS中写的.padreImagenes和实际类名不匹配，导致父容器属性不生效
定位基准修正：position: relative要加在父容器上，而不是加在大图上，这样小图的绝对定位才会以父容器（即大图的边界）为参照，不会跟着视口尺寸乱跑
居中逻辑修正：固定像素的top/left只在特定分辨率下对齐，需要用百分比偏移配合自身反偏移实现自适应居中

修改后完整代码

HTML代码

<div className="row justify-content-center my-5 ">
  <div className="col-xs-10 col-sm-6 my-auto mx-auto">
    <Fade left duration={1000} delay={1000} fraction={0.1} >                    
      <div className="father">
        <img height="110%" width="100%" className="img-fluid biggerImg" src="/img/edificios.jpg" alt="edificios"/>
        <img src="/img/logo02.png" alt="logo" className="logo"/>
      </div>
    </Fade>
  </div>
</div>

CSS代码

/* 对应HTML父容器类名 */
.father {
  position: relative;
  line-height: 0; /* 消除图片默认下方间距，保证父容器尺寸和大图完全一致 */
}

.biggerImg{
  opacity: 0.8; 
  /* 去掉你原有写在这里的position: relative */
}

.logo{
  position: absolute;
  /* 以下三行实现响应式水平+垂直双居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 按需添加尺寸限制，避免小图在小屏溢出 */
  max-width: 30%;
  max-height: 30%;
}