当屏幕宽度大于图像宽度但保持固定高度时,如何在网页顶部显示封面图像?
这是一个包含我试图模仿的行为的页面 http://outsite.co/san-diego/
以下是我尝试将其应用到的页面的链接 http://phrasemates.com/xcode-developer-language-app.html
谢谢!
答案 0 :(得分:2)
这将是指定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
}
答案 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的设置高度。这将填充观察窗的宽度,但保持您的身高。