Question

我尝试用plain（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生成的。

你能帮帮我吗？

提前谢谢你！

Answer 1

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

给容器一个位置：relative
给图像一个位置：绝对，顶部：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'
    });
});

Answer 2

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

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

您可以使用background-position和background-size来控制尺寸和位置。

Answer 3

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

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

是：

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

jsfiddle

垂直中心拉伸图像在横幅div

3 个答案: