有没有办法让我的图像等于导航栏的大小?

时间:2016-07-16 01:21:23

标签: html css navigation image-resizing responsive

我是否有办法让width navigation bar与图片width相同497 x 298px。问题是我正在处理原始尺寸为margins的图片,但要使图片在页面的整个宽度上展开,同时10px width: 98.4%ul我必须设置width 100%

此外,出于某些原因,当我将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; }设置为NSDocument时,导航时间太长,只有在我将其设为50%时才适合普通的桌面屏幕。所以目前它们都是相同的长度,但是当我调整页面大小时,它们开始与我所设定的规则之后的ul元素不同步。



readFromData




1 个答案:

答案 0 :(得分:0)

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

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

我创建了

DEMO HERE

woohooo一周内搬到卡利!所以我把它作为Cali主题。

注意:我使用的图像与帖子中指定的尺寸相同。

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