最小高度和100％寬度的居中圖像
[英]Centered image with a min-height and 100% width
問題描述
我想創建一個標題圖像，該圖像是頁面部分的背景。 要求如下：
- 寬度：100％
- 最低高度：400像素
- 在標題欄下方
- 能夠在其上放置文本和/或覆蓋
- 最重要的是，無論屏幕大小，我都希望圖像居中
我想要圖像的上方有一個標題欄，其余頁面將在圖像下方繼續。 基本上是嘗試將圖像創建為頁面標題的背景。
1 個解決方案
解決方案1
0 2015-02-09 03:04:45
頁面的HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WebSite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="banner">Text floating over image goes here</div>
然后在.css文件中，描述id-“橫幅”：
#banner {
height: 400px;
padding: 0;
background: #1d1e8a url(./images/website_banner.png) no-repeat;
color: #333;
background-size: 100% 100%;
}
Flex增長直到垂直居中的div內的特定最大高度，最小高度為100％
[英]Flex Grow until specific max-height inside of a vertically centered div with min-height 100%
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.