html - 使图像位置与背景图像和元素图像相同

Question

我在一个页面上使用相同的图像作为 div 的背景图像，在另一页上用作图像元素。它们在两个页面上占用相同的空间，相同的宽度和高度，但图像的位置不同。这是背景图片 html:

<div class="frontpage-bg-image-wrapper">
    <div class="header-bg-image frontpage-header-hero"></div>
    <div class="bg-overlay overlay"></div>
</div>

这是它的 CSS:

.frontpage-header-image-div {
   height: 100%;

   .frontpage-bg-image-wrapper {
      position: relative;
      width: 100%;
      min-height: 635px;
      background-size: cover;
      background: url('/wp-content/themes/sfk/assets/images/sfk-bg.png') no-repeat;
  }
}

在另一页上我有一个图像元素:

<div class="hero-image-wrapper">
    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/sfk-bg.png">
     <div class="overlay"></div>
</div>

及其CSS:

.hero-image-wrapper img{
  width: auto;
  height: 100%;
}

但是图像的定位有区别，我用object-fit: cover试过，但没用。这是背景:

这是图像元素:

我该如何解决？

Answer 1

我认为您的图片小于容器(特别是“高度”)；background-size:cover 将剪切外部图片以适合容器，但是 'img' 标签不会。

1. 第一种方式:将容器大小设置为与图片相同的比例([容器宽度]:[容器高度] = [图像宽度]:[图像高度])
2. 第二种方式:尝试 img 标签的 css:100%，高度:auto