Question

无论我遵循什么教程，当我尝试将图像设置为全背景时，我的图像总是被放大太多。

下面是我的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <style>
            #bg {
                position: fixed; 
                top: 0; 
                left: 0; 

                /* Preserve aspet ratio */
                min-width: 100%;
                min-height: 100%;
                }
        </style>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <img src="https://i.imgur.com/52dLf1W.jpg" id="bg" alt="">
    </body>
</html>

我在这里做错了什么？

Answer 1

将这些用于您的图像样式

width: 100%;
height: 100%;
object-fit: cover;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <style>
    #bg {
      position: fixed;
      top: 0;
      left: 0;
      /* Preserve aspet ratio */
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <img src="https://i.imgur.com/52dLf1W.jpg" id="bg" alt="">
</body>

</html>

HTML 中的完整背景图像放大太多

1 个答案: