【问题标题】：Is there a way to make my image equal the size of the navigation bar?有没有办法让我的图像等于导航栏的大小？
【发布时间】：2016-07-16 01:21:22
【问题描述】：

有没有一种方法可以使我的navigation bar 的width 与图像相同的width。问题是我正在使用原始大小为497 x 298px 的图像，但要使图像拉伸页面的整个宽度，同时在任一侧仍然具有margins 或10px，我必须设置@987654327 @。

此外，由于某种原因，当我将 ul 设置为 width 100% 时，导航太长了，如果我将其设置为 50%，则只能在普通桌面屏幕中显示。所以目前它们的长度相同，但是当我调整页面大小时，它们开始与遵循我设置的规则的 ul 元素不同步。

ul {
  display: block;
  max-width: 100%;
  list-style-type: none;
  margin: 10px 10px 0 10px;
  padding-left: 32%;
  padding-right: 25%;
  text-align: center;
  overflow: hidden;
  background-color: #F25f70;
  font-family: "Oswald", sans-serif;
  border-bottom: 2px solid rgba(0, 0, 0, 0.15)
}
img {
  width: 98.4%;
  height: 500px;
  margin-left: 10px;
  margin-right: 10px;
  object-fit: cover;
}

【问题讨论】：

标签： html css navigation image-resizing responsive

【解决方案1】：

您应该将导航包裹在<div> 中。给它 100% 的宽度。然后将 background-image 分配给您的 <ul> 并使其宽度为 98%。包括这些背景属性

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

我创建了一个

DEMO HERE

哇哦一周后搬到卡利！！！所以我把它做成了卡利主题。

注意：我使用的图片与您帖子中指定的尺寸相同。

您也可以查看background-size properties at w3schools

【讨论】：