Html Dreamweaver:背景图像设置为高度：自动将不显示任何内容

今天我在这里读了很多问题，希望能毫无结果地回答我的问题，所以我希望这里有人能帮助我

我正试图将我的网站发展成一个响应性强的网页设计，但我对图片有意见

问题:

我正在尝试从标记为背景图像的css加载图像，但由于我加载它们的容器中没有内容，因此将高度设置为“自动”将导致没有图片，因为从技术上讲，容器为0，没有任何内容。我需要将高度设置为“自动”，因为我需要图像与网页缩放，以便在没有较大空白的情况下保持比例

我知道要设置背景图像比例，我必须将css设置为：

background: url(../images/image.jpg);
background-repeat: no-repeat;
height: auto;
width: 100%;

同样，这对我不起作用的原因是，我希望使用背景图像作为实际图像，而不包含任何内容。由于没有内容，图像将不会显示。我想知道的是，是否有办法解决这个问题

我之所以选择通过css加载图像，是因为我希望能够基于查看器设备（台式机、手机、平板电脑等）加载特定图像的多个版本（小到大的文件大小，按特定设备大小缩放）

为了涵盖所有方面，我想提到我在html中使用了img标记，并通过css为不同的设备重新缩放。但是，如果可能的话，我仍然希望通过css加载图像，因为它允许我为不同的设备大小加载不同的文件大小，以增强移动设备的用户体验。如果有其他方法，请告知。我已经为此花了26个工作小时，所以任何帮助都将不胜感激

编辑：

我已经启动了一个测试模板来保持编码的简单性，这样每个人都可以看到我正在使用的东西，并且可能有助于诊断为什么它不工作

HTML:

---

我试图实现的一个例子可以在www.dreamcreationstudios.com/test2.html上找到。这是通过img标签完成的。我希望能够创建相同的效果，除了通过css加载图像，这样我就可以加载不同屏幕大小的原始图像的裁剪版本。谢谢。

您可以为内容容器设置最小高度，这样当没有内容时容器不会折叠到0高度：

min height

适合您

或者，可以在已定义高度的父元素上设置背景图像

---

p/s：如果您不想因为背景无法覆盖整个容器而使用难看的空格，那么您应该使用

背景大小：cover

。您将保留图像的纵横比，浏览器将相应地缩放背景图像，使其最短的轴尽可能地延伸，以覆盖整个容器。

您可以设置内容容器的最小高度，这样，当没有内容时，容器不会折叠到0的高度：

min height

适合您

或者，可以在已定义高度的父元素上设置背景图像

---

p/s：如果您不想因为背景无法覆盖整个容器而使用难看的空格，那么您应该使用

背景大小：cover

。您将保留图像的纵横比，浏览器将相应地缩放背景图像，使其最短轴尽可能延伸，以覆盖整个容器。

需要以响应方式进行大量的修改。这不是Dreamweaver的错。 默认情况下，浏览器查看您的代码，并检查是否有任何空白元素没有任何子元素或其本身定义了宽度和高度。 您已经定义了它的宽度，这是好的，但不幸的是，它没有得到这个容器的任何高度。 最好且快速的方法是定义它的

背景大小

属性，不要担心容器的高度

background: url(../images/image.jpg);
background-repeat: no-repeat;
height: auto;
width: 100%;
background-size: 100% 100%; // example, you can change it.

---

而且它在所有设备上都能完美工作。

有很多黑客需要以响应的方式进行攻击。这不是Dreamweaver的错。 默认情况下，浏览器查看您的代码，并检查是否有任何空白元素没有任何子元素或其本身定义了宽度和高度。 您已经定义了它的宽度，这是好的，但不幸的是，它没有得到这个容器的任何高度。 最好且快速的方法是定义它的

背景大小

属性，不要担心容器的高度

background: url(../images/image.jpg);
background-repeat: no-repeat;
height: auto;
width: 100%;
background-size: 100% 100%; // example, you can change it.

---

而且它在所有设备上都能完美工作。

这可以通过在div上应用背景图像的填充底部来完成，但您必须首先知道图像的纵横比

.page .page_content .contentmain {
    background: url(../images/mimg-l.jpg);
    background-repeat: no-repeat;
    height: 0; //Make the div 0px high
    padding-bottom: 75%; //Adjust this value to match the image dimensions
    background-size: 100% 100% contain;
}

---

这可以通过在背景图像的div上应用填充底部来实现，但是您必须首先知道图像的纵横比

.page .page_content .contentmain {
    background: url(../images/mimg-l.jpg);
    background-repeat: no-repeat;
    height: 0; //Make the div 0px high
    padding-bottom: 75%; //Adjust this value to match the image dimensions
    background-size: 100% 100% contain;
}

---

height:auto

仅在您有内容时才起作用。如果没有，元素将不会显示任何高度。你必须根据我要做的事情来明确地设置元素的高度，你会建议如何完成它？基本上，我希望图像能够缩放到设备大小，同时能够根据查看器的屏幕大小加载多个大小的图像。

height:auto

仅在您有内容时才起作用。如果没有，元素将不会显示任何高度。你必须根据我要做的事情来明确地设置元素的高度，你会建议如何完成它？基本上，我想要一个可以缩放到设备大小的图像，同时能够根据查看器的屏幕大小加载多个大小的图像。我也尝试过这种方法，但没有效果。可能是因为我使用的是CS5，而不是CS5.5或CS6？Akshaya，我