Question

我有一个小问题，我正在创建一个网站，我想给图像一个最大高度。图像可能只有另一个div的高度。

您可以在此处查看布局：http://bit.ly/1OAGsLR 它关于1920x1080的图像，我需要与div相同的高度，并留下类盒子。如果正确，图像应该很好地缩放。

但我尝试了所有我知道的但我没有让它工作，有人可以使用CSS工作或我需要使用Javascript吗？

提前致谢！

Answer 1

当屏幕宽度达到或超过1400像素时，您的图像看起来就像您想要的那样。您应该考虑使用css媒体查询来移动或调整不同屏幕宽度的图像。您可以使用foundation或bootstrap等css框架轻松处理您的布局，这将为您处理css媒体查询断点。

如果您有意尝试不使用css框架，请查看此css media queries tutorial以帮助您入门。

Answer 2

你需要让你的容器更宽。您的容器宽度为1200px，每个容器的宽度为560 + 40。这意味着您图像的最大宽度为560px。现在为了保持它的纵横比为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>

图像最大高度

4 个答案: