我正在尝试使用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="">
我的输出是这个
为什么两种情况下看起来都一样?
答案 0 :(得分:0)
相对于您要为其设置元素的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="">
答案 1 :(得分:0)
background-image
CSS属性在元素上设置背景图像,因此该元素的大小决定了图像的尺寸
在您的情况下,您已经设置了div
元素的样式:
width: 100%
-将占据100%的视口height: 200px
-将元素和图像高度都设置为200px 尽管<img>
元素将图像嵌入文档中,这意味着浏览器将按原样呈现图像(不更改其尺寸)。
根据您的情况,图片的尺寸为:
width: 1440px; height:449px;
答案 2 :(得分:-1)
您应该使用css值background-repeat: no-repeat
来防止背景图像在div中复制自身。
要控制div中的背景图片大小,请阅读有关css属性background-size
:https://www.w3schools.com/cssref/css3_pr_background-size.asp
答案 3 :(得分:-1)
在您的代码示例中,您已将图像背景容器的高度设置为200px,因此图像也将采用该高度,因为它与容器尺寸的大小有关...
请注意,您应该考虑背景大小,因为默认情况下它将是自动的,这将防止背景拉伸,并保持高度/宽度百分比以防止图像失真。