Html 横幅div中垂直居中拉伸的图像_Html_Css_Image_Center_Banner

Html 横幅div中垂直居中拉伸的图像

html css image

Html 横幅div中垂直居中拉伸的图像,html,css,image,center,banner,Html,Css,Image,Center,Banner,我尝试使用纯（x）html和CSS实现以下目标：我有一个网站，在内容顶部显示一个横幅图像。图像位于两个嵌套的div中我想将图像部分拉伸到整个页面宽度。从图像上只能看到150px高度的中间柄请看图片：黑框表示页面的可见区域。图像按比例拉伸以适应页面宽度，应切割上下区域（不透明）。代码结构如下： .... <body> ... <div class="someclass"> ... <!-- several nested divs here

我尝试使用纯（x）html和CSS实现以下目标：

我有一个网站，在内容顶部显示一个横幅图像。图像位于两个嵌套的div中

我想将图像部分拉伸到整个页面宽度。从图像上只能看到150px高度的中间柄

请看图片：

黑框表示页面的可见区域。图像按比例拉伸以适应页面宽度，应切割上下区域（不透明）。

代码结构如下：

....
<body>
  ...
  <div class="someclass">
  ... <!-- several nested divs here -->
        <div id="outer">
          <div id="inner">
            <img src="tux.png" />
          </div>
        </div>
  ....
  </div>
  ...
</body>

。。。。
...
... 
....
...

小提琴：

我有几天瞎混，但没能做到这一点。我找到了将图像放在背景中的解决方案，但这不是一个选项，因为代码是由CMS生成的

你能帮我吗

提前谢谢你

将图像更改为背景图像。这给了你更多的控制

.tux { 
background-image: url('tux.gif');
background-position: center; 
background-size: cover;
}

您可以使用

背景位置

和

背景大小

控制大小和位置，我想这正是您想要的。看看这个：

#inner{
    height: 150px;
    overflow: hidden;
    position: relative;
}
img{
    width: 100%;
    position: absolute;
    top: 50%;
}

js:

我知道它使用的是javascript，但没有纯HTML/CSS解决方案，除非你选择背景图像的方式

给容器一个位置：相对
给图像一个位置：绝对，顶部：50%
为图像（使用javascript）提供一个高度为其一半的边距

Css:

Javascript

jQuery(function($){
    var $img = $('img');
    $img.css({
        'margin-top': ($img.height() / -2) + 'px'
    });
});

你能做一把小提琴吗？或者显示css？

img{width:100%；height:auto；}

？图像是否需要作为img存在，或者您是否可以使用css背景，背景大小/背景位置良好？添加说明：图像不能用作背景，因为代码是由CMS创建的。您可以将其与表格对齐吗，表格单元格和垂直高度/接近我想要的。不幸的是，在调整窗口大小后需要重新加载。将其包装在

$（window）.resize（function（）{…}）中然后<代码>jQuery（函数（$）{$（窗口）.resize（函数（）{var$img=$（'img'）；$img.css（{marginTop:（$img.height（）/2）+'px'}；}）；}）关闭，但不太好：当您使区域非常窄时，图像会从div中流出。
img {
    top: 50%;
    position: absolute;
}
#inner{
    position: relative;
}

jQuery(function($){
    var $img = $('img');
    $img.css({
        'margin-top': ($img.height() / -2) + 'px'
    });
});