Css 背景图像响应

我遇到了一个问题，当我调整窗口大小时，我的图像没有响应。我试图通过将图像放在html标记之间并使用CSS 100%宽度的图像来修复它，但效果不好

之后，我尝试了

背景尺寸：封面和
背景大小：包含。如果这样做，它的反应，但高度太小。我希望图像显示全高，而不是400px之类的。当我输入
高度时：100vh或<代码>高度：100%它没有响应


nav{
背景：#fff；
宽度：100%；
高度：120px；
}
导航菜单{
明确：两者皆有；
垫面：1.5em；
}
.js导航#菜单{
溢出：隐藏；
最大高度：0；
}
导航#菜单.active{
最大高度：25em；
}
导航菜单{
保证金：0；
填充：0；
}
导航菜单a{
显示：块；
填料：1.2米；
文字装饰：无；
}
导航菜单李a：悬停{
颜色：#668bc3；
}
#介绍{
背景图像：url（../images/hero2.jpg）；
背景重复：无重复；
高度：100vh；
背景尺寸：封面；
宽度：100%；
}









尝试这样设置图像样式，看看是否有效：

@media screen and (max-width: 769px) { #intro { height: 100%; max-width: ?px; }}

添加@media规范将确保样式将影响屏幕宽度为769px及以下的设备。您需要指定您喜欢的宽度来代替问号

希望这有帮助
 
contain
会留下空白，
封面
会剪掉一些东西，
100%100%
会拉伸。你不能用不合比例的图片来满足一切。（这根本不可能）

解决这一问题的最佳方法是使用媒体查询将不同屏幕大小的图像转换为不同比例的图像

例子：
要让一张反应灵敏的图像始终填充元素而不进行裁剪或拉伸，是相当困难的。特别是当存在内容限制/要求时，即由于内容的原因，元素必须至少如此高或如此宽

因此，我认为这可能是你最好的选择。它将裁剪您的图像，尽管它将确保图像填充元素

要减少一些裁剪，请尝试提供一个与将应用到的元素具有相似纵横比的图像，即，对于宽度为其高度10倍的元素，不要使用方形或纵向图像-如下图所示，将裁剪很多

您可以使用媒体查询来提供具有更优化纵横比的图像版本，甚至可以使用艺术指导（关注图像的特定区域）


ul，li{
保证金：0；
填充：0；
列表样式：无；
}
保险商实验室{
显示器：flex；
}
李{
填充：0.5雷姆；
}
.x轴，
.y轴，
.排序优化{
显示器：flex；
对齐项目：居中；
保证金：5雷姆自动；
最大宽度：800px；
最小高度：100px；
边框：2件紫色；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
}
.x轴{
背景图像：url（'https://unsplash.it/600/300/?image=100' );
}
.y轴{
背景图像：url（'https://unsplash.it/300/600/?image=100' );
}
.排序优化{
背景图像：url（'https://unsplash.it/400/100/?image=100' );
}
@介质（最小宽度：400px）{
.排序优化{
背景图像：url（'https://unsplash.it/600/100/?image=100' );
}
}
@介质（最小宽度：600px）{
.排序优化{
背景图像：url（'https://unsplash.it/800/100/?image=100' );
}
}


一个
两个
三
四


一个
两个
三
四


一个
两个
三
四

我不清楚您在这里的目标。是否只希望图像填充标题元素的背景？无论标题的高度如何？是的，只要图像完全可见。现在，它总是不断切断我的图像本身的高度。当我将标题置于100%高度或px时，当你调整大小时，它不再响应。好吧，如果你的图像没有与标题相同的纵横比，你将不得不接受以下选项之一：1）沿x或y轴剪切，2）当图像的纵横比无法填充空间或3）拉伸时“字母装箱”。你更喜欢哪一种？我想第一种似乎是最好的选择。百分比高度要求父母指定一个高度。此处无定义，因此
高度：100%不起作用。
@media screen and (max-width: 480px) {
    #intro {
        background-image: url(../images/hero-mobile.jpg); /* Example Image */
    }
}