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

时间:2016-08-25 22:22:16

标签: html css

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

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

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

谢谢!

3 个答案:

答案 0 :(得分:2)

这将是指定height的元素,background-image background-position设置为50%centerbackground-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

            }

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

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