jquery - 如果浏览器高度或宽度发生变化但保持比例，则缩放图像

Question

我正在尝试制作我的第一个响应式网站，我正在尝试设计一个着陆页，以便根据浏览器的大小调整文本和图像的大小。

我已经用文本完成了这个，但不知道如何用图像来完成。

到目前为止，这是我网站的 fiddle :http://jsfiddle.net/581eg1cx/1/

您会注意到文本会根据高度和宽度变小，我需要对图像做同样的事情。

即，如果浏览器高度变小，图像将按比例缩小，同时不重叠或在文本下方并保持居中，宽度也是如此。

这是图片部分的css，其余的可以在fiddle中找到。

.big-logo {
   max-width:auto;
   height:auto;
   position: absolute;
   top: 20%;
   left:50%;
   font-size:18px;
   background:blue;
   -webkit-transform: translateY(-50%) translateX(-50%);
   -ms-transform: translateY(-50%) translateX(-50%);
   transform: translateY(-50%) translateX(-50%);
}

.big-logo img {
   width:100% !important;
   height:100% !important;
   display:block;
}

Answer 1

您要实现的目标可以通过纯 CSS 实现。我已经改变了你的 fiddle 来告诉你如何。尝试改掉绝对定位所有内容的习惯，这样您就不必在每个元素上设置“顶部”，让网站的自然流动来完成工作。

还要避免使用 transform，因为并非所有浏览器都支持它，您尝试使用 translateY 做的事情可以很容易地用负边距完成。

http://jsfiddle.net/581eg1cx/4/

code

最后，并非响应式网站上的所有内容都必须缩放，尤其是文本。使用 CSS 媒体查询并根据识别的设备断点设置内容，即 320px wide = iphone。正如 @single31 所述，根据这些断点更改配置也是一个好主意。