Html 如何使img的行为与背景图像相同？

我使用一个图像作为背景图像，

background image:url（）

，我还使用放置在

看起来src图像的高度比背景图像的高度短。
如果我将src图像的高度设置为背景图像的高度，src图像将受到干扰

我应该设置什么CSS属性使src图像与背景图像具有相同的高度，但不会干扰src图像？请注意：我只需要调整src图像，而不是背景图像

请看一下我的照片

HTML

---

请注意：因为我使用的图像很长，我必须为img设置宽度：100%。如果我没有设置，浏览器底部将显示一个导航栏。

添加位置：CSS类中的固定。然后你可以调整高度

.imageBG {
 background-image: url("https://library.danahall.org/wp- 
 content/uploads/2019/04/2560px-Bufo_periglenes2.jpg");
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
 height: 353px;
 position:fixed;
 }

 img {
 width: 100%;
 height: 353px;
 }

---

只需向包含div的img添加一个类，并将其高度设置为353px

.image-container {
  height: 353px;
}

img {
 height: 100%;
 width: 100%
}

---

正如我看到的，你的src图像是正确的，你的背景图像正在做的是缩放图像，使其适合100%和你的353px，所以你的src图像的高度是正确的，这是backgound

如果你使用数学和正确的比例，你会得到：

  height: 252px; // this is the right proportions 

---

考虑

对象匹配

和

对象位置

.imageBG{
背景图像：url（“https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg");
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
身高：353px；
}
img{
宽度：100%；
身高：353px；
对象匹配：覆盖；
对象位置：中心；
display:block；/*使其表现为div和avoir空格问题*/
}

这是背景图像


下面是正面图片。它的高度看起来小于背景图像中的高度。

您的图像位于div右侧将该div的高度调整为353px，并在图像上使用100%的高度添加位置：fixed将使元素脱离文档流，并且它将相对于视口。我认为OP不希望这样。谢谢，Shrish Ankit提供了您的解决方案，但需要在

img

中设置属性，而不是在

中设置属性。imageBG

谢谢Ramesh！我这样做了，但图像受到了干扰。因为我们使用的是100%宽度和353px高度，所以实际图像的纵横比没有得到保持。您的背景图像还使用了一些大小和位置属性，因此这两个图像看起来并不相似。您希望图像如何显示取决于您，但是具有不同CSS的两个图像的外观永远不会相同。您好Temani Afif，非常感谢您分享解决此问题的解决方案！这是意料之中的事！感谢您提供了一个链接来解释对象适合度和对象位置。

.image-container {
  height: 353px;
}

img {
 height: 100%;
 width: 100%
}

  height: 252px; // this is the right proportions