在整个宽度上固定高度背景图像答案

【问题标题】：Fixed height background image over entire width在整个宽度上固定高度背景图像
【发布时间】：2013-03-15 17:08:33
【问题描述】：

现在我正在使用以下代码将图像缩放到屏幕的整个宽度和高度。我实际上想要完成的是图像本身保持其原始高度，但如果用户缩小浏览器，它会切断图像的两侧。有谁能帮帮我吗？

html{
    background: url(jup.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='jup.png',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='jup.png', sizingMethod='scale');
}

【问题讨论】：

jsfiddle。我看不出你的代码有什么问题。它应该给你你想要的！
我现在使用的代码是将图像缩放到屏幕的整个高度，而不是固定高度（=原始图像的高度，比如说 500px）...
使用max-height; 和max-width 怎么样？

标签： html css image background

【解决方案1】：

您可以在背景尺寸中使用值：

background-size:500px auto;

【讨论】：

或 background-size:100% auto;
额外的小问题，还有没有办法指定最小宽度，然后开始滚动？我尝试了 min-width 但这显然不起作用..
min-width 不会对背景图像产生任何影响。你能更清楚地解释一下预期的目标是什么吗？我能想到的唯一方法，我认为的目标是，根据页面宽度或页面比例切换一个类。或者使用媒体查询来更改依赖于宽度的 css。
我想让它当用户将它缩小到 1000px witdh 时，背景图像的宽度停止减小，文本等不再“滑动”，滚动条（水平）然后必须出现。
@media only screen and (max-width : 1000px) { selector { background-size: auto; } }