将图像大小调整为其父级的高度并在窗口调整大小时调整其大小答案

【问题标题】：resize image to the height of it parent and resize it on window resize将图像大小调整为其父级的高度并在窗口调整大小时调整其大小
【发布时间】：2012-09-23 04:02:23
【问题描述】：

我的代码需要帮助

这是我的例子 - http://jsfiddle.net/urK7t/

全尺寸页面 - http://dev.fama.net.pl/tides/

概念：

我想要 100% 的宽度和 100% 的高度，溢出：隐藏的 DIV 里面有宽图像，我可以左右移动，这个图像应该在窗口调整大小时调整大小，现在你在我的例子中看到的只是拉伸图像高度，我想调整整个图像的大小，但我不想显示整个图像，它需要左右移动

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您想要的图片样式如下：

#bg-image {
    width: 100%;
    height: auto;
}

以后你真正想要的CSS属性是object-fit:http://www.netmagazine.com/tutorials/control-image-aspect-ratios-css3

【讨论】：

就是这样，但没有宽度：100%；我需要图像以适合这样的高度jsfiddle.net/urK7t/1

【解决方案2】：

您可以说是否将此图像作为背景来包含或覆盖，甚至是 100% 100% 等，这取决于您是希望它缩放还是全屏等。

【讨论】：

我想缩放它以适应它的父高度女巫是窗口高度
-moz-background-size：封面；背景尺寸：封面； “cover”关键字表示应调整图像大小并保持任何内部纵横比。
我会将背景大小设为自动 100%；这应该做到这一点，使用javascript你可以得到window.height并基于它缩放图像，就像说window.height是图像y大小然后可能在每次窗口高度改变时调用函数，不知道，比如那