添加到原来接受的答案只需添加样式宽度:100%;到内部图像，以便它将自动收缩/扩展的移动设备，而不会在移动视图中采取大的顶部或底部边距。

<div style="background-image: url(http://your-image.jpg);background-position:center;background-repeat:no-repeat;background-size: contains;height: auto;"> <img src="http://your-image.jpg" style="可见性:隐藏;宽度:100%;“/> < / div >

添加到原来接受的答案只需添加样式宽度:100%;到内部图像，以便它将自动收缩/扩展的移动设备，而不会在移动视图中采取大的顶部或底部边距。

<div style="background-image: url(http://your-image.jpg);background-position:center;background-repeat:no-repeat;background-size: contains;height: auto;"> <img src="http://your-image.jpg" style="可见性:隐藏;宽度:100%;“/> < / div >

我能想到的最好的解决办法是用百分比来指定你的宽度和高度。这将允许您根据显示器大小调整屏幕大小。它更响应式的布局。

举个例子。 你有

<br/>
<div> . //This you set the width percent to %100
    <div> //This you set the width percent to any amount . if you put it by 50% , it will be half
    </div>
 </div>

这是最好的选择，如果你想要一个响应式布局，我不建议浮动，在某些情况下浮动是可以使用的。但在大多数情况下，我们避免使用float，因为当你进行跨浏览器测试时，它会影响很多事情。

希望这对你有所帮助。

这个答案与其他答案相似，但对于大多数应用程序来说是最好的。你需要事先知道你通常做的图像大小。这将允许您添加叠加文本，标题等，没有负填充或绝对定位的图像。关键是设置填充%以匹配图像纵横比，如下面的例子所示。我使用了这个答案，本质上只是添加了一个图像背景。

.wrapper { width: 100%; /* whatever width you want */ display: inline-block; position: relative; background-size: contain; background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat; margin: 0 auto; } .wrapper:after { padding-top: 75%; /* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */ display: block; content: ''; } .main { position: absolute; top: 0; bottom: 0; right: 0; left: 0; color: black; text-align: center; margin-top: 5%; } <div class="wrapper"> <div class="main"> This is where your overlay content goes, titles, text, buttons, etc. </div> </div>

我用jQuery解决了这个问题。直到新的CSS规则允许这种类型的行为，我发现这是最好的方法。

设置你的divs

下面是你想要显示背景的div(“hero”)，然后是你想要覆盖在背景图像上方的内部内容/文本(“inner”)。你可以(也应该)将内联样式移动到英雄类中。我把它们留在这里，这样就可以快速和容易地看到应用到它的样式。

<div class="hero" style="background-image: url('your-image.png'); background-size: 100%; background-repeat: no-repeat; width: 100%;">
    <div class="inner">overlay content</div>
</div>

计算图像纵横比

接下来，通过将图像的高度除以宽度来计算图像的纵横比。例如，如果你的图像高度是660，宽度是1280，那么长宽比就是0.5156。

设置一个jQuery窗口大小调整事件来调整高度

最后，添加一个jQuery事件监听器来调整窗口大小，然后根据纵横比计算英雄div的高度并更新它。这种解决方案通常会在底部留下一个额外的像素，因为使用纵横比的计算不完美，所以我们在结果大小中添加一个-1。

$(window).on("resize", function ()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

确保它在页面加载时工作

您应该在页面加载时执行上面的resize调用，以便在一开始就计算出图像的大小。如果你不这样做，那么英雄div将不会调整，直到你调整窗口的大小。我设置了一个单独的函数来进行大小调整。下面是我使用的完整代码。

function updateHeroDiv()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

$(document).ready(function() 
{       
    // calls the function on page load
    updateHeroDiv(); 

    // calls the function on window resize
    $(window).on("resize", function ()
    {
        updateHeroDiv();        
    }
});

我敢肯定这东西在这里永远不会被看到。但如果你的问题和我一样，这就是我的解决方案

.imaged-container{
  background-image:url('<%= asset_path("landing-page.png") %> ');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 65vw;
}

我想在图像的中心有一个div，这将允许我这样做。