删除网页底部的空白

问题描述 投票：0回答：1

我有一个有趣的问题要问你。这可能很简单，但我没有主意！

仅当我将窗口缩小到小于我设置的最小宽度尺寸的 300 像素时，它才会出现。我不想要图片下方有任何空白。

enter image description here

html 是； '''

<!DOCTYPE html>
<link rel="stylesheet" href="index.css">

<html>
  <body>
      <img src="bakgrunn.jpg" class="bakgrunn" alt="Fantasy Gambling">
  </body>
</html>

'''

CSS 是； '''

* {
    margin: 0;
    padding: 0;
}
.bakgrunn {
    width: 100%;
    min-width: 300px;
    
}

'''

有人能想出解决这个看似简单的问题的方法吗？提前非常感谢。

克里斯

html css windows image whitespace
1个回答
0
投票

如果您不希望图像下方的区域为白色，请在正文上设置背景颜色。

但是，如果您希望图像与页面一样高，那么您需要为其指定高度。

请参阅代码片段中的编辑注释以进行特定编辑。

* {
    margin: 0;
    padding: 0;
}


.bakgrunn {
    /* EDIT Add height to remove gap at bottom of img */
    height: 100vh;
    /* EDIT Set to block to prevent scroll bar */
    display: block;
    
    width: 100%;
    min-width: 300px;
}
  <img src="https://placebear.com/400/200.jpg" class="bakgrunn" alt="Fantasy Gambling">

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.