图片最大高度

Question

我有一个小问题，即时通讯创建了一个网站，我想给图像一个最大高度。 图像只能具有与另一个div相同的高度。

您可以在此处检查布局： http : //bit.ly/1OAGsLR它的分辨率约为1920x1080，并且我需要与div保持相同的高度，并带有类框。 如果正确，图像应缩放良好。

但是我正在尝试我所知道的但我没有使它起作用，有人可以使它与CSS一起使用还是我需要为此使用Javascript？

提前致谢！

Answer 1

当屏幕宽度等于或大于1400像素时，您的图像将以您想要的方式显示。 您应该考虑使用CSS媒体查询在不同的屏幕宽度下移动或调整图像。 您可以使用基础或引导程序之类的CSS框架轻松处理您的布局，该框架会为您处理CSS媒体查询断点。

如果您有意不使用CSS框架，请​​查看此CSS媒体查询教程以开始使用。

Answer 2

您需要使您的容器div更宽。 您的容器的宽度为1200px，每个框的宽度为560 + 40。 这意味着您的图片最大宽度为560像素。 现在要保留其16：9的长宽比，图像的最大高度为560/16 * 9 = 315像素。

Answer 3

好的，您的主要问题是不喜欢用这种方式定义高度。 我为您提供了一个可以“解决”此问题的解决方案，但是它不是很漂亮，您可能希望通过JavaScript使用此方法。 下面是一个非常粗糙的示例模型。

 body > div { width: 100%; max-width: 500px; background: green; padding: 10px; position: relative; } body > div > div { width: 50%; padding: 20px; } body > div > img { position: absolute; right: 20px; top: 20px; max-width: 50%; /* make sure to fall back to 80% so theres at least some gutter for older browsers */ max-height: 80%; /* use calc to make the image the height of the relative parent minus padding */ max-height: calc(100% - 40px); } 

 <div> <div>Push<br />Push<br />Push<br />Push<br />Push<br /></div> <img src="http://placehold.it/350x150" /> </div> 

简而言之，这会将您的图片放在框的右侧，为其提供max-height （因为可以定位）和max-width （因此较小的屏幕尺寸不会让您感到惊讶）。

现在，您可以轻松地将其转换为更通用的系统，其中.box + .box获得绝对位置，或者您可以为必须推送内容的框定义一个类，并将其添加到第一个框，使所有其他框成为绝对值。

Answer 4

我通过使用JS修复了问题，即时消息使用以下脚本：

<script type="text/javascript">
    function changeheight(){
        var Height = document.getElementById('box').clientHeight;
        document.getElementById('imagebox').style.height = Height+'px';
    }
</script>