代码之家 › 专栏 › 技术社区 › sboda

引导程序-页面标题中的图像

image twitter-bootstrap

sboda · 技术社区 · 6 年前

我想添加一个图像作为页眉,但无法去掉上边缘。见红色部分目前这是HTML

<div class=“page header”>
<img src=“/eroforrasok/logo3.jpg”class=“img fluid page header”alt=“responsive image”>
&L/DIV & GT;
< /代码> 

和CSS代码

.page header{
填充顶:0px;
页边:0px 0 0px;
垂直对齐:顶部;
}
< /代码> 

我也试过了

固定顶
< /代码> 

它消除了上边缘,但图像总是在顶部,
我无法向下滚动图像…
有什么建议吗?
目前这是HTML

<div class="page-header">
    <img src="./eroforrasok/logo3.jpg" class="img-fluid page-header" alt="Responsive image" >
</div>


CSS代码

.page-header {
  padding-top:0px;
  margin: 0px 0 0px;
  vertical-align: top;
}


我也尝试过

fixed-top


它消除了上边缘,但图像总是在顶部,
我无法向下滚动图像…
有什么建议吗?

1 回复 | 直到 6 年前

davidkonrad 6 年前

如果认为你误解了 .page-header 一点点:

h1的一个简单外壳,用于适当地隔开和分段页面上的内容部分。它可以利用h1的默认值small 元素,以及大多数其他组件(具有附加样式)。

但是如果你坚持你不应该使用 <img> 标签内 页眉 . 使用A background-image 相反;固定高度和 background-size 设置为 cover 做“魔术”。例子:

.page-header h1 {
  margin-top: 0px;
}
.page-header {
  height: 60px;
  margin-top: 0px;
  background-size: cover;
  background-image: url(some/parth/to/image);
}

<div class="page-header">
  <h1 class="text-primary">My awesome page header</h1>
</div>

演示-gt; http://jsfiddle.net/pxu4gb6c/

推荐文章

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

McRui · Laravel storeAs()存储问题中的图像

1 年前

HTML · 如何使用css使任何SVG图像灰度化?

2 年前

GabyUnalaq · 从原始RGB深度图像到灰度的转换不正确

2 年前

AayushPokharel · 如何在css中处理图像的alpha层?

2 年前

MHSarmadi · 阻止显示未完全加载的图像

3 年前

softandwet · 反应img onError未点火

3 年前

Nilesh soni · 颤振图像已缩放,但如何更改缩放位置

3 年前

Adheed nihal · 如果在jquery中超过了文件限制,如何清除用户上传的图像

3 年前

imcoding · img src属性上的vuejs数据绑定出现404错误

3 年前