根据 Web 浏览器大小 CSS 调整大小和拉伸图像答案

【问题标题】：Resize & stretch image depending on Web Browser size CSS根据 Web 浏览器大小 CSS 调整大小和拉伸图像
【发布时间】：2016-01-22 05:02:20
【问题描述】：

我正在做一个项目，我有一些按钮图像，我想根据浏览器或屏幕尺寸自动调整它们的大小。

我已经设法用这段代码在 CSS 中得到了这个：

#nav {
max-width: 100%;
position: absolute;
top: 0%;
right: 0%;
width: auto;
height: auto;
z-index: 8;
}

img { max-width: 100%; height: auto; }

但是我希望它也可以从左到右水平拉伸。图像粘在浏览器的左侧，但是当我增加浏览器的宽度时，结果如下：

如果可能的话，我想将图像一直拉伸到右侧。

【问题讨论】：

【解决方案1】：

好吧，尝试将以下页面添加到您的<head>：

<meta name="viewport" content="width=device-width">

应该可以。如果您希望它们位于中心，只需使用

body {text-align:center;}

或img {margin-left:auto; margin-right:auto;}

【讨论】：