Question

我有以下内联css代码：

npm run start

FiddleJs

我需要图像为全宽和高度。

Answer 1

更新：

所以我理解你希望div具有它的背景图像的高度/宽度。没有javaScript的任何帮助，如果你可以改变你的html，你可以做以下。

将img元素嵌套在div中，该元素与背景图像具有相同的img。添加到visibility:hidden。在div上添加display:inline-block并删除其他height和width样式。

这样div就会环绕你的图像（隐藏），background-image是唯一可见的图像。

请参阅代码段

<div class="home-hero" style="background-image: url('https://dummyimage.com/300'); background-position: 100% center; background-repeat: no-repeat; background-size: cover; display:inline-block">

  <img src=" https://dummyimage.com/300 " style="visibility:hidden;max-width:100%;height:auto;"" />
  
</div>

首先，全宽和高度是什么？

其次，在div上设置height:100%。 100%什么？你没有任何内容。

如果你想div（所以bgimage）是屏幕的100％，那么有两种可能的解决方案

在height:100%

body,html

body,html {
  height:100%
}

<div class="home-hero" style="background-image: url('https://dummyimage.com/300'); background-position: 100% center; background-repeat: no-repeat; background-size: cover; height: 100%; width: 100%;">
</div>

使用视口单元。设置100vh作为div的高度（vh - 视口高度）

<div class="home-hero" style="background-image: url('https://dummyimage.com/300'); background-position: 100% center; background-repeat: no-repeat; background-size: cover; height: 100vh; width: 100%;">
</div>

作为旁注。我建议不要使用内联样式，因为它们非常“丑陋”且难以维护（更改/更新/删除等）。请改用css文件。

显示完整的背景图像

1 个答案: