为什么使用背景图像时图像尺寸会减小？

Question

我正在尝试使用background-image和img src标签显示图像。当我使用background-image使用同一张图片时，我感到困惑。它会变小。但是当我使用img src标签时，为什么看起来很好？

这是我的代码 https://codesandbox.io/s/affectionate-cartwright-pw2mq?file=/src/styles.css

<div class="curve-img-container">

jjjj
    </div>

        <img src="src/bg-curvy-desktop.svg" alt="">

我的输出是这个

为什么两种情况下看起来都一样？

Answer 1

相对于您要为其设置元素的height和width出现背景图像。当您初始使用图片标签时，它会加载图片的实际height和width（与div相比有所不同），因此它们看起来有所不同。

因此，在您的情况下，如果您希望它们看起来都一样，则需要为img和div使用相同的height和width。

例如，如果您希望它们看起来都相同，则可以执行这些操作。

请注意，object-fit: cover;object-position: center;等于CSS的background-size: cover;background-position: center;，希望这能回答您的疑问

此外，请始终使用img标签，因为它更适合SEO。

img{
    height: 50px;
    width : 50px;
    object-fit: cover;
    object-position: center;
}
.mydiv{
    height: 50px;
    width : 50px;
    background-size: cover;
    background-position: center;
}

<div class="mydiv" style="background-image : url(https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg)"></div>

<img src="https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg" alt="">

Answer 2

background-image CSS属性在元素上设置背景图像，因此该元素的大小决定了图像的尺寸

在您的情况下，您已经设置了div元素的样式：

• width: 100%-将占据100％的视口
• height: 200px-将元素和图像高度都设置为200px

尽管<img>元素将图像嵌入文档中，这意味着浏览器将按原样呈现图像（不更改其尺寸）。

根据您的情况，图片的尺寸为：

• width: 1440px; height:449px;

Answer 3

您应该使用css值background-repeat: no-repeat来防止背景图像在div中复制自身。

要控制div中的背景图片大小，请阅读有关css属性background-size：https://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 4

在您的代码示例中，您已将图像背景容器的高度设置为200px，因此图像也将采用该高度，因为它与容器尺寸的大小有关...

请注意，您应该考虑背景大小，因为默认情况下它将是自动的，这将防止背景拉伸，并保持高度/宽度百分比以防止图像失真。