Javascript 如何在页面（无滚动）中显示尽可能大的整个图像，以保持其纵横比
我有一个有两列的页面布局。第一个是80%宽度，另一个是20%。我希望在第一列中显示尽可能大的图像。问题是如果我使用宽度：100%；高度：自动；对于此图像，如果我调整窗口大小，直到得到一个较短的窗口，窗口将隐藏图像的底部 问题: 期望的行为： 我知道我不能在保持纵横比的同时获得100%的高度和宽度，但我想知道，在任何情况下，您会如何保持这张图像尽可能大 理想情况下，它会在垂直屏幕上使用宽度：100%，在水平屏幕上使用高度：100%（在调整窗口大小时从一个选项切换到另一个选项），但不确定哪一个是最好的选项。可能是检查窗口高度是否低于图像，然后更改图像尺寸Javascript 如何在页面（无滚动）中显示尽可能大的整个图像，以保持其纵横比,javascript,css,image-resizing,window-resize,image-scaling,Javascript,Css,Image Resizing,Window Resize,Image Scaling,我有一个有两列的页面布局。第一个是80%宽度，另一个是20%。我希望在第一列中显示尽可能大的图像。问题是如果我使用宽度：100%；高度：自动；对于此图像，如果我调整窗口大小，直到得到一个较短的窗口，窗口将隐藏图像的底部 问题: 期望的行为： 我知道我不能在保持纵横比的同时获得100%的高度和宽度，但我想知道，在任何情况下，您会如何保持这张图像尽可能大 理想情况下，它会在垂直屏幕上使用宽度：100%，在水平屏幕上使用高度：100%（在调整窗口大小时从一个选项切换到另一个选项），但不确定哪一个是
你会怎么做 尝试将图像放入
dividdiv希望这有帮助如果您不想隐藏图像底部，请使用高度：100% 现在，如果您想要此
宽度：在垂直屏幕上为100%，高度：在水平屏幕上为100% body {
background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
试试这个代码。它覆盖了屏幕的整个部分。您无法在不同的纵横比上获得相同的吞吐量，但是背景大小：cover提供了最好的支持。如果您想深入挖掘，可以使用具有多个src属性的picture元素，也可以使用 这不一定能完全按照您所希望的方式工作，但只要图像永远不会比容器更薄，它就应该按照您所希望的方式工作 基本上，您只需在图像上放置一个混合宽度和一个最大高度，然后在保持纵横比的同时，它将始终以任何方式收缩 正如我前面所说的，这个答案的唯一问题是，如果图像小于容器，则图像不会延伸到容器大小（始终使用能够以最大可能宽度填充容器的图像，或者使用svg） （）
/*此CSS仅用于此演示，不相关*/html，正文{高度：100%；边距：0；}。左、.右{显示：内联块；垂直对齐：顶部；浮动：左；高度：100%；}。左{宽度：20%；背景：#aaa；}。右{宽度：80%；背景：#bbb；}