如何使图像自动调整大小以适应与高度相关的浏览器窗口

问题描述：

我正在尝试使图像适合浏览器窗口与其高度相关并动态响应窗口大小。如何使图像自动调整大小以适应与高度相关的浏览器窗口

我需要图像宽高比保持不变，但如果在大屏幕上查看图像，图像可能大于原始分辨率。

我不希望图像溢出屏幕外，并创建一个scolling效果。

图像必须保持居中放置，既是垂直也是水平的容器。

Here is an example of what I am trying to achieve.

'我想...'。分享你的尝试。这很容易用“高度：100％;宽度：自动;'或与'background-size：cover' –

试试这个js插件http://johnpolacek.github.io/imagefill.js/ – Jason

@Jason这是一个'background-size：cover' with'background-位置：中心中心。使这两行比包含一个依赖jQuery的插件写这两行更好。 –

答

目前尚不清楚你尝试过什么到目前为止，我们不要”没有看到任何代码。我会尽力回答，也许它会帮助你。

首先，当您使用响应式布局时，请始终尝试使用viewport height and width来设置您的元素的大小。这有助于保持内容相对于浏览器的大小 - 无论是调整大小还是屏幕有多大。

此代码可以帮助你插入一个负责任的形象到您的网站：

div { 
    width:80vw; 
    height:80vh; 
} 
img { 
    max-width:100%; 
    height:auto; 
    max-height:100%; 
}

工作实例here

在这个例子中div大小两个窗口的高度和宽度的80％，所以它永远不会超过视口。最大。 img的措施是div和height:auto;的100％确保其保持其纵横比。然后图像适合一个div允许的最大值。通过将display:table-cell; vertical-align:middle; text-align:center;设置为DIV，您可以舒适地将图像居中。

另一个解决方案是：

background-image:url(' '); 
background-size:contain; 
background-repeat:no-repeat; 
background-position:center;

检查出来here

感谢您的深入解答。这正是我正在寻找的。如何在没有窗口开始滚动的情况下在此div上放置白色边距？ – Breageside

我只是使用黄色背景来演示DIV与图像的相对大小。检查https://jsfiddle.net/ecj81dex/5/ – freewheeler

@Breageside，你可以使用轮廓：{any-width} solid #fff; – Eggineer

答

做这样的事情你为例，你可以使用background-size:cover。

cover 
缩放图像，同时保持其固有的纵横尺寸比（如果有的话），以最小的尺寸，使得它的宽度和高度都可以完全覆盖背景定位区域。

这确保背景图像覆盖了一切。将不会有明显的background-color，但是根据屏幕比你的形象的很大一部分可能会被切断

另请参阅该plunker：https://plnkr.co/edit/khXfLdsUV5aIJlTo4SSl?p=preview

如何使图像自动调整大小以适应与高度相关的浏览器窗口

相关推荐