使用浏览器宽度自动调整图像大小但在div内保持相同的高度？

Question

我试图弄清楚是否有一种只能通过CSS方式来获取有关boilerroom.tv标头的效果。一个非常类似的问题：How to resize image automatically on browser width resize but keep same height?但是没有填满整个页面，只在div中。基本上宽度保持与浏览器相同，高度保持不变（比如说... 300px），因此图像变得越来越小，但隐藏了div的溢出。谢谢！

Answer 1

您应该发布代码，这样我们就可以更好地了解您要完成的内容以及您尝试过的内容。然而，听起来你正在寻找背景封面。在你的CSS中：

.element{
    background: url(path/to/image)
    background-size: cover;
    height: 300px;
    width: 100%;
}

请确保为background-size包含正确的供应商前缀，以实现跨浏览器兼容性。

Answer 2

请尝试这个。 DIV {     background：url（imagepath）     背景尺寸：封面;     身高：100％;     宽度：100％; }