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

Question

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

htmlcssimageresponsive-images

5

我正在尝试使一张图片适应浏览器窗口的高度，并根据窗口大小动态响应。需要保持图片的宽高比不变，但如果在大屏幕上查看，则图像可以比其原始分辨率更大。我不希望图像溢出屏幕并创建滚动效果。该图像必须在容器内垂直和水平居中。这是我想要实现的示例。

- Breageside

1

我正在尝试...... 我正在尝试使用height: 100%; width: auto;或者background-size: cover来实现某些功能。 - Marcos Pérez Gude

试试这个JS插件：http://johnpolacek.github.io/imagefill.js/ - Jason

2

@Jason，这是使用background-size:cover和background-position:center center的背景设置。将这两行代码写入程序比使用依赖于jQuery的插件更好。 - Marcos Pérez Gude

3个回答

4

使用CSS属性object-fit，您可以不使用容器来实现此功能：

img {
  height: 100vh;
  width: 100%;
  object-fit: contain;
}

查看浏览器支持情况。

- Aidan Feldman

0

如果要实现类似于您的示例，可以使用background-size:cover。

cover
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

这样可以确保背景图片覆盖所有内容。不会有任何可见的background-color，但是根据屏幕比例，您的图像可能会被裁剪掉一部分。

还可以查看此 Plunker：https://plnkr.co/edit/khXfLdsUV5aIJlTo4SSl?p=preview

- Maxouhell

我认为你的意思是 background-size: contain。 - Aidan Feldman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- freewheeler · Accepted Answer

目前并不清楚你尝试了什么，也没有看到任何代码。我会尽力回答你的问题，并希望能对你有所帮助。

首先，在使用响应式布局时，尽量使用 视口高度和宽度 来定义元素大小。这可以使你的内容相对于浏览器大小而变化，无论调整大小或是屏幕的尺寸如何。

以下代码可能会帮助你在网站上插入一个响应式图片：

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

这里有一个工作示例，点击这里

在这个示例中，div 的大小为窗口高度和宽度的80％，因此它永远不会超出视口。 img 的最大尺寸为div的100％，height：auto;保证了它保持其纵横比。然后图像适合最大允许的div。您可以通过将display：table-cell; vertical-align：middle; text-align：center;设置为DIV来轻松地将图像居中。

另一个解决方案是：

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

在这里查看这里