使用 CSS 创建流体背景图像答案

【问题标题】：Create Fluid Background Image with CSS使用 CSS 创建流体背景图像
【发布时间】：2017-07-14 17:23:52
【问题描述】：

我正在尝试构建一个可以根据屏幕大小调整大小的简单流体图像。

但是当浏览器的宽度变小时，我无法让图像变小。

HTML：

<main>
    <section class="slider-ctn">
        <figure class="logo"></figure>
    </section>
</main>

CSS：

.slider-ctn figure.logo {
    margin: auto;
    background-image: url('../Images/logo.200x100.png');
    width: 200px;
    height: 100px;
}

【问题讨论】：

请提供jsfiddlesn-p。
我正在尝试使用 calc 的解决方案。如果成功了，我会稍后发布。
没有使用计算。决定改用大众单位。答案贴在下面。希望对您有所帮助。
@AmrAly 嗨，我可以创建一个 jsfiddle，但代码就是这样，仅此而已。
@Patrick 你说得对，不需要。

标签： html css responsive-design fluid-layout

【解决方案1】：

如果您将background-size 设置为100% 100% 或cover，图像将拉伸以适合容器。去掉宽度（或者通过设置父级的宽度来限制宽度）并在图形上设置height: 0; padding-top: 50%，使图形的高度为宽度的一半，这样纵横比就会匹配图片，流畅。

* {margin:0;padding:0;}
.slider-ctn {
  margin: auto;
  width: 200px;
}
.slider-ctn figure.logo {
  background: url('https://dummyimage.com/200x100/000/fff') top left no-repeat;
  height: 0;
  background-size: cover;
  padding-top: 50%;
}

<main>
  <section class="slider-ctn">
    <figure class="logo"></figure>
  </section>
</main>

【讨论】：

@Patrick 那么您所要做的就是删除.slider-ctn...上的宽度，然后它将缩放到设备宽度。也许您想将其设置为max-width？
@Patrick 使用 top center 如果适合您。我刚刚选择了一些东西，top left 是默认值。 50% 的 padding-top（或底部）表示宽度的 50%。由于您的图像为 200x100，因此您希望高度为宽度的一半，这意味着您使用 50% 的填充。
@patrick 然后使用 68.42783505% 填充。 alistapart.com/article/creating-intrinsic-ratios-for-video
@Patrick 不，单击“全部显示”并再次查看。 >= ie8 支持它
@Patrick “一个条件”？查看该页面的顶部/右侧，该属性已获得 97% 的支持。

【解决方案2】：

另一个使用大众单位和包含的选项。

如果您知道图像的纵横比，则可以使用 vw（视图宽度）作为宽度和高度的单位。

我正在使用具有 4x3 纵横比的图像。如果我希望宽度始终为屏幕的 80%，我将使用 80vw。然后，我的高度将是宽度的 3/4，即 60vw。

然后一定要使用 contains 来调整背景大小。

试试这个css，看看它是否满足你的需求：

.slider-ctn figure.logo { margin: auto; background-image: url('https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg'); background-size: contain; background-repeat: no-repeat; width: 80vw; height: 60vw; border: 5px solid red; }

【讨论】：

您好，谢谢，但对于每张图片来说，这似乎是一个复杂的操作，我希望有一个可以用于每张图片的解决方案。

【解决方案3】：

只需使用此代码将以下内容添加到您的 head 标记中：

<meta name="viewport" content="width=device-width, initial-scale=1">

【讨论】：

您好，谢谢！我已经在使用这个标签了。但是我发现了一些奇怪的东西，当我使用 Chrome 中的 Toggle Device Bar 并尝试调整它的大小时，它工作正常，但是当我禁用 TDB 时它不会调整大小。
在你的 CSS 中使用 flex-box 或 grid

【解决方案4】：

您应该将contain 作为背景尺寸添加到您的 CSS：

.slider-ctn figure.logo {
  margin: auto;
  background-image: url('../Images/logo.200x100.png');
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain;
  width: 200px;
  max-width:100%;
  height: 100px;
  display:inline-block;
}

每次使用背景图片时，不要忘记将position 和repeat 添加到背景属性中。

如果父容器小于徽标容器，我还添加了max-width 以适应父容器。

Example here

注意：不要在 background-size 中使用 cover，因为这会削减你的徽标仅适合 width 限制，contain 将适合 width 和 height.

【讨论】：

您好，谢谢！以及为什么要使用 display:inline-block; ?
这是出于习惯，我总是设置显示方法，因为有时容器在某些导航器中无法正常显示。 display:inline-block 让你从父 div 获取对齐方式（如果有左对齐、居中、右对齐），display:block 将像 float （仅左或右）一样工作，但你也可以“居中对齐” with margin:auto如果你愿意
我试图删除边距：自动；由于中心中心位置，结果是相同的。我无法使用 1280x800 的图像将图像调整为更小的视口然后 300px，知道为什么吗？

【解决方案5】：

我认为将图像的最大宽度设置为 100% 应该可以解决问题。

.slider-ctn figure.logo {
  background-image: url('../Images/logo.200x100.png');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  width: 200px;
  height: 100px;
}

【讨论】：

您好，谢谢，但它不起作用，它保持原来的大小
嘿@Patrick，是的，因为我没有意识到它是背景图像。我编辑了代码 sn-p。
好吧，让我测试一下。谢谢。
使用你的解决方案，我遇到了一个问题，当图像从他的初始尺寸减小时，它会创建一个空白空间，如顶部边距和底部边距，但我不想要之前的空地。但是如果我删除 center 属性，图像会在左侧居中，是否有可能解决这个问题？
我在Fiddle 中做了一些更改，但没有找到问题所在。如果需要，您也可以对 Fiddle 进行更改，以显示更多信息。比如父容器的样式是什么。