html - 图像不尊重 div 的大小

Question

我有一个 div 里面有一个图像。但是我有一个问题，它不尊重 div 的大小，并且与它重叠。

.bs-col-md-6 {
  box-sizing: border-box;
  -ms-flex-positive: 0;
  flex-grow: 0;
  0;
  */ -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-left: 15px;
  padding-right: 15px;
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
}

.bsp-login-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

<div class="bsp-xs-hidden bsp-sm-hidden bs-col-md-6">
  <img class="bsp-login-banner" src="assets/img/Login.jpg" alt="the image is here" />
</div>

有人能帮我吗？

标签： htmlcss

Answer 1

不要使用position: fixed- 这将完全将该元素从所有其他元素的上下文中移除（窗口/视口除外）。

尚不完全清楚您想要什么，但您可以改用它position:absolute并将其应用于position: relative其父元素，以使其位置成为参考元素（在某种程度上，如果定义了它的大小）。