Question

我是网页设计的新手，我正在为一个餐厅创建一个网站，我制作了我的模型，但是我有问题（或者可能不可能）我的模型显示我的图像显示（图像跟随）

这是我的模型的顶部

enter image description here

我希望标题为100％（想通了）图像100％宽度

图像为1480x808 并且使用此代码它保持100％宽度，但高度与我的下一部分不匹配（它要么完全将其推离页面，要么在其他分辨率中它与下一部分之间存在很大的白色差距）

有人能指出我在正确的方向吗？

真的很感激

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#header {
	height: 100px;
	background-image: url(_images/headerpattern.jpg);
	background-repeat: repeat;
}
#mainpicture {
	height: 808px;
	width: 100%;
	max-height: 808px;
	margin-left: auto;
	margin-right: auto;
}
#redbar {
	height: 10px;
	width: 100%;
	background-color: #94201f;
}
#slogan {
	height: 207px;
	width: 100%;
}
</style>
</head>

<body>
<div id="container">
  <div id="header"></div>
  <div id="mainpicture"><img src="_images/mainpic.jpg"  alt="" width="100%"/></div>
  <div id="redbar"></div>
  <div id="slogan">Content for  id "slogan" Goes Here</div>
  <div id="redbar"></div>
  
  
  
</div>
</body>
</html>

Answer 1

尝试从#mainpicture

中删除height和max-height属性

<强>更新

对于红色条，我将其从您的标记中删除，并在第一张图片上使用border-bottom，在第二张图片上使用border-bottom

这里是fiddle

Answer 2

从#mainpicture中删除高度。要么如果您需要高度，您可以尝试将图像放在#mainpicture的背景中并设置背景大小封面。离开#mainpicture div blank

喜欢

<div id="mainpicture"></div>

CSS

#mainpicture {
    height: 808px;
    width: 100%;
    max-height: 808px;
    margin-left: auto;
    margin-right: auto;
    background-image:url(_images/mainpic.jpg);
    background-position:center top;
    background-size:cover;
}

Answer 3

如果您希望自己的网页具有响应能力，则必须制定一些规则。

您希望显示图像以及标语区域。但是这个页面可以在几个设备中看到，有几种尺寸。

所以，你应该使用相对尺寸，这样你的目标可以通过许多设备实现......

将图像放在具有相对尺寸的div中...

100％图像宽度？

3 个答案: