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

如果您将background-size设置为100% 100%或cover，则图片会拉伸以适合容器。移除宽度（或通过设置父宽度来限制宽度）并在图上设置height: 0; padding-top: 50%以使图形的高度为宽度的一半，因此宽高比将与图像匹配并且是流体

＆＃13;

* {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%;
}

＆＃13;

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

＆＃13;

Answer 2

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

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

Answer 3

您应该在CSS中添加contain作为背景大小：

.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

注意：请勿在后台尺寸中使用cover，因为这会削减你的徽标只适合width限制，contain适合width和 height。

Answer 4

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

如果您知道图像的纵横比，可以使用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; }

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创建流体背景图像

5 个答案: