Answer 1

Answer 2

我做了什么：

• 使用url（urlsrc）
将背景图像设置为div
• 使用src = urlsrc
将div添加到div中
• 使用.width（）和.height（）
获取img大小
• 删除img
• 将div的css宽度和高度设置为先前计算的宽度和高度

丑陋，但确实有效：p

Answer 3

.parent {
    object-fit: contain;
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 100%;
}

.parent1 {
 background-image: url("https://www.image-engineering.de/content/products/charts/te169/images/TE169.jpg");
}

.transparent-img{
    max-height:360px;
    opacity: 0;
}

 
<div class="parent parent1" id="homeNav">
   <img class="transparent-img" src="https://www.image-engineering.de/content/products/charts/te169/images/TE169.jpg">
 </div>  

oued提供了很好的答案，但这是我使用纯CSS所做的事情。

您将backgorund-size属性设置为包含而不重复。您将background-url设置为同一父元素上的单独类。 然后，将要在父元素内的图像的不透明度设置为0。 这样，您的div就会放宽透明图像的宽度，并显示背景图像，并且可以很好地缩放。