在CSS中重写的ID仅显示图像的一部分而不是完整图像(Overridden ID in CSS shows only portion of image instead of full image)

编程入门行业动态更新时间:2024-10-10 02:16:36

HTML

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css.css"> </head> <body> <img id="logo-img"> </body> </html>

CSS

#logo-img { background: url("google.png") no-repeat; width:100px; height:100px; }

当我试图使用CSS指定图像时，它只显示图像的一部分，而不是将其缩小（100x100从左上角开始）。为什么？它不应该缩放？

HTML

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css.css"> </head> <body> <img id="logo-img"> </body> </html>

CSS

#logo-img { background: url("google.png") no-repeat; width:100px; height:100px; }

When I'm trying to specify image using CSS,it only shows the portion of the image instead of scaling it accordinlgly(100x100 starting from top-left corner).Why?Shouldn't it be scaled?

最满意答案

background-image默认不会缩放。看看background-size属性。将导致图像缩放的常见值为cover ， contain和100% 。你可以在这里阅读更多关于缩放背景图片的信息 - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images

根据图像与元素的纵横比，图像是background ，您也可以修改background-position属性。在这里阅读更多信息 - https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

A background-image doesn't scale by default. Look at the background-size property. Common values that will cause the image to scale are cover, contain, and 100%. You can read more about scaling background images here - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images

Depending on the aspect ratio of the image compared to element the image is a background of, you may also want to modify the background-position property, too. Read more about that here - https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

更多推荐

本文发布于:2023-08-07 13:18:00，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1464318.html