Question

我试图建立我的第一个自适应网站，我试图设计一个着陆页，以便根据浏览器大小调整文本和图像的大小。

我用文字完成了这项工作，但无法弄清楚如何使用图片。

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

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

即如果浏览器高度变小，图像将缩小而不重叠或位于文本下方并保持居中，宽度也相同。

这里是图像部分的CSS，其余部分可以在小提琴中找到。

.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实现。我改变了你的小提琴，告诉你如何。尽量摆脱绝对定位所有内容的习惯，这样你就不必在每个元素上设置“顶部”，让网站的自然流动起作用。

同时避免使用变换，因为它并非在所有浏览器中都支持，您尝试使用translateY可以轻松完成负边距。

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

code

最后，并非响应式网站上的所有内容都必须扩展，特别是文字。使用CSS媒体查询并根据识别的设备断点设置内容，即320px wide = iphone。正如@ single31所说，基于这些断点改变处置也是一个好主意。

Answer 2

你可以通过两种方法做到这一点，一种是基于css媒体标签，另一种是jquery动态函数

$(window).load(function() {    

    var theWindow        = $(window),
        $img              = $("#img"),
        aspectRatio      = $img.width() / $img.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $img
                .removeClass()
                .addClass('bgheight');
        } else {
            $img
                .removeClass()
                .addClass('bgwidth');
        }

    }

    theWindow.resize(resizeBg).trigger("resize");

});

Answer 3

更新了JSFiddle，我认为这就是你的意思。

图像和容器css应为：

.big-logo {
   height:50%;
   position: relative;
   font-size:18px;
   background:blue;
   text-align:center;
}

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

我也修改了主文本css，看看。

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

3 个答案: