Javascript 调整图像大小以完全适合容器

我在这里搜索了这个问题，找到了几个例子，我特别尝试了一个，但它根本不起作用，就像我希望的那样

我已经将容器的高度设置为600px，它甚至还没有接近。我肯定这是因为我的图像宽度只有33%，但有没有办法让这些更高，或者我被困在只有这么高的高度

我不明白为什么最右边的图像甚至都没有放到容器的顶部。我至少希望这样

究竟有没有办法调整这些图像的高度，还是会让它们完全不成比例

$（窗口）.load（函数（）{
$（'.home img block'）。查找（'img'）。每个（函数（）{
var imgClass=（this.width/this.height>1）？“宽”：“高”；
$（this）.addClass（imgClass）；
})
})

#主img块{
宽度：100%；
高度：600px；
}
/*#家庭img模块容器{
边框：1px纯黑；
}*/
·住宅综合管理大厦{
宽度：33%；
身高：100%；
边框：1px纯黑；
显示：内联块；
}
.主img块img.wide{
最大宽度：100%；
最大高度：100%；
最大宽度：100%；
高度：自动；
}
.住宅img大厦img.tall{
最大宽度：100%；
最大高度：100%；
最大宽度：100%；
宽度：自动；
}

---

以下方法可以覆盖容器的整个高度。从图像中删除

最大宽度

，并给出

垂直对齐：顶部

和

溢出：隐藏到容器

但并非如此，它会剪切你的图像，因为它不会保持高宽比，因为高度太高，宽度太小


$（窗口）.load（函数（）{
$（'.home img block'）。查找（'img'）。每个（函数（）{
var imgClass=（this.width/this.height>1）？“宽”：“高”；
$（this）.addClass（imgClass）；
})
})
#主img块{
宽度：100%；
高度：600px；
}
/*#家庭img模块容器{
边框：1px纯黑；
}*/
·住宅综合管理大厦{
宽度：33%；
身高：100%；
边框：1px纯黑；
显示：内联块；
溢出：隐藏；
垂直对齐：顶部；
}
.主img块img.wide{
最大高度：100%；
}
.住宅img大厦img.tall{
最大宽度：100%；
最大高度：100%；
最大宽度：100%；
宽度：自动；
}
好吧，您已经将图片的高度设置为“自动”，因此，如果最右边的图片与其他两张图片的原始大小不同，则可能是问题所在。您可以尝试为最后一张图片添加一个id，然后使用它来增加其高度。您也可以尝试使用引导功能，它对于将屏幕等分非常有用。
#home img块{
#home-img-blocks {
    font-size: 0;
    height: 600px;
    width: 100%;
}
/*#home-img-blocks-container {
    border: 1px solid black;
}*/
.home-img-block {
    border: 1px solid black;
    box-sizing: border-box;
    display: inline-block;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 33.33%;
}
.home-img-block img.wide {
    height: 100%;
    margin-left: -20%;
    width: auto;
}
.home-img-block img.tall {
    height: 100%;
    margin-left: -50%;
}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
<div id="home-img-blocks">
    <div class="home-img-block">
        <img src="http://optimumwebdesigns.com/images/test1.jpg">
    </div>
    <div class="home-img-block">
        <img src="http://optimumwebdesigns.com/images/test2.jpg">
    </div>
    <div class="home-img-block">
        <img src="http://optimumwebdesigns.com/images/test3.jpg">
    </div>
</div>

字号：0；
高度：600px；
宽度：100%；
}
/*#家庭img模块容器{
边框：1px纯黑；
}*/
·住宅综合管理大厦{
边框：1px纯黑；
框大小：边框框；
显示：内联块；
身高：100%；
溢出：隐藏；
位置：相对位置；
宽度：33.33%；
}
.主img块img.wide{
身高：100%；
左边缘：-20%；
宽度：自动；
}
.住宅img大厦img.tall{
身高：100%；
左边缘：-50%；
}

您可以尝试上面的代码，它将完美地适用于所有普通桌面屏幕。
html

<div id="home-img-blocks">

      <div class="home-img-block">
    <img src="http://optimumwebdesigns.com/images/test1.jpg">
  </div>

  <div class="home-img-block">
    <img src="http://optimumwebdesigns.com/images/test2.jpg">
  </div>

  <div class="home-img-block">
    <img src="http://optimumwebdesigns.com/images/test3.jpg">
  </div>

</div>

js

没必要


文件


支持


如果需要，请为ie11专门编写额外代码（#home img blocks->display:table/.home img block-->display:table cell），但请先查看ie11，因为它可能没问题。
您是否希望这样：？是的，这样图像就可以覆盖容器的整个高度，没有不成比例或破坏形象。你的预期产出是什么？@Paul，如果是，那么我结束这个问题。没什么好回答的。@RayonDabre你什么意思？我不明白你是什么？？即使我刚刚尝试了你的代码，我也得到了和以前一样的结果。如果可能的话，我仍然希望图像是成比例的。@Paul你想如何成比例？容器的高度和宽度不同，因此无法保持比例。您能给出预期输出的图片/快照吗？我不明白rayon的小提琴是如何获得覆盖整个div高度的图像的？jsfiddle.net/rayon_1990/w3aerp1L。。我甚至试过这个密码，但都没用。
#home-img-blocks {
  display:flex;
  flex-direction:center;
  /* flex-wrap:wrap; */ /* turn this on if you want the images to wrap on smaller browsers */
  width:auto; /* calculates to 1156px wide */
    height: 600px;
}

.home-img-block {
    flex:0 0 896px; /* round down of narrowest image at 600px height */
  overflow:hidden;
    border: 1px solid black;
}

.home-img-block img {
    max-height:100%;
}