Question

当屏幕宽度大于图像宽度但保持固定高度时，如何在网页顶部显示封面图像？

这是一个包含我试图模仿的行为的页面 http://outsite.co/san-diego/

以下是我尝试将其应用到的页面的链接 http://phrasemates.com/xcode-developer-language-app.html

谢谢！

Answer 1

这将是指定height的元素，background-image background-position设置为50%或center，background-size的大cover设置为auto 100%或div.wide{ height:500px; background-image: url(path/to/big.jpg); background-position: 50%; background-size: cover; }（对于某些较旧的浏览器）。

FIRAuth.auth()?.createUser(withEmail: emailTextField.text!, password: passwordTextField.text!) { (user, error) in
            if error == nil{
                user?.sendEmailVerification(completion: nil)


            }else if error == ?!?!?!{
                //alert user of issue

            }

Answer 2

添加到Isaac Lubow所说的内容中，我还会在那里添加一个溢出规则，所以它看起来像

    div.wide {
    height:500px;
    background-image: url(path/to/big.jpg);
    background-position: 50%;
    background-size: cover;
    overflow:hidden;
}

添加overflow: hidden;将确保图片不会在任何地方流血。但它可能没有必要，只取决于您的设置。

Answer 3

您还可以将宽度设置为100vw并保持500px的设置高度。这将填充观察窗的宽度，但保持您的身高。

如何为具有固定高度但宽度延伸的网站制作封面图像？

3 个答案: