使用 CSS 创建流体背景图像

Question

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

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

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;
}

Answer 1

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

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

Answer 2

如果将 background-size 设置为 100% 100% 或 cover，图像将拉伸以适合容器。去掉宽度（或者通过设置parent的宽度来限制宽度），在图形上设置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>

Answer 3

您应该将 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

NOTE: Don't use cover in background-size because that will cut your logo to fit only within width limits, contain will fit width and height.

Answer 4

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

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

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

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

试试这个 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; }

Answer 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;
}

使用 CSS 创建流体背景图像

Create Fluid Background Image with CSS

html

css

fluid-layout

responsive-design