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

【问题标题】：vertically center stretched image in banner div横幅 div 中的垂直居中拉伸图像
【发布时间】：2014-09-14 12:15:21
【问题描述】：

我尝试使用普通 (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>

小提琴：http://jsfiddle.net/JQ4wp/2

我摆弄了几天，但无法做到这一点。我找到了将图像置于后台的解决方案，但这不是一个选项，因为代码是由 CMS 生成的。

你能帮帮我吗？

提前谢谢你！

【问题讨论】：

你能创建一个小提琴吗？还是显示css？
img { width: 100%; height: auto; } ?
图片是否需要作为 img 存在，或者你可以使用 CSS 背景，背景大小/背景位置好？
补充说明：图片不能用作背景，因为代码是由CMS创建的。
你能把它与表格、表格单元格和垂直高度对齐吗/

标签： html css image center banner

【解决方案1】：

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

给容器一个位置：相对
给图像一个位置：绝对，顶部：50%；
为图像（使用 javascript）设置一半高度的 marginTop

http://jsfiddle.net/yvrwL/

CSS：

img {
    top: 50%;
    position: absolute;
}
#inner{
    position: relative;
}

Javascript

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

【讨论】：

接近我想要的。不幸的是，窗口调整大小后需要重新加载。
把它包裹在$(window).resize(function(){ ... }); 然后... jQuery(function($){ $(window).resize(function(){ var $img = $('img'); $img.css({marginTop: ($img.height() / 2) + 'px'}); }); });

【解决方案2】：

将图像更改为背景图像。这为您提供了更多控制权。

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

您可以使用background-position 和background-size 控制大小和位置。

【讨论】：

【解决方案3】：

我想这就是你想要的。看看这个：

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

js：

$('#inner img').load(function(){
    $(this).css({
        marginTop: -1/2 * $(this).height()
    });
});

jsfiddle

【讨论】：

关闭，但不太好：当你把区域弄得很窄时，图像会流出div。