Question

所以我学会了响应式设计，看起来非常简单。但是，有一件事我不明白。我的主页中心有一个很大的全宽图像。它有一定的大小，CSS似乎需要像素的大小 - 如果我输入％它不显示。

所以现在我有

.picture-main {
    /*background-color: gray;*/
    background-image: url("./images/homepage_main_picture.png");
    background-repeat: no-repeat;

    background-position: center;
    background-size: cover;

    padding-right: 0;
    margin-right: 0;
    padding-left: 0;
    margin-left: 0;
    width: 100%;
    height: 250px;
}

但是，如果我更改浏览器窗口的大小以检查响应性，它只会缩放＆amp;相应地拉伸它，图像会扭曲，看起来很可怕。有人有解决方案吗？

PS：请注意，stackoverflow上的其他答案并没有解决我的问题，或者至少我相信。例如this one here，也称为“如何制作全宽度图像响应”。 - 也许我错误地说了我的问题呢？

Answer 1

尝试使用background-size: contain;，这样背景图片将保持其比例。

＆＃13;

.picture-main {
  background: url("//placehold.it/500x300/cf5") no-repeat 50%;
  padding: 0; margin: 0;
  width: 100%;
  height: 250px;
}

.contain{
  background-size: contain;
}
.cover{
  background-size: cover;
}

＆＃13;

Example using background-size: contain
<div class="picture-main contain"></div>

Example using background-size: cover
<div class="picture-main cover"></div>

＆＃13;

Answer 2

一种方法是将元素的高度设置为宽度的一部分。

E.g：

1）因此元素的宽度是视口宽度的100％。

2）如果原始图像的宽度是原始图像的一半，则可以将元素的高度设置为视口宽度的一半。

.picture-main {
height:50vw;
}

1 vw =视口宽度的1procent。 50vw =视口宽度的50％。

这将为元素提供正确的大小和比例。＆＃34;背景大小：盖;＆＃34;然后将确保背景填满。

如何使全宽图像响应？（没有比例/伸展）

2 个答案:

如何使全宽图像响应？ （没有比例/伸展）

2 个答案:

如何使全宽图像响应？（没有比例/伸展）