Question

首次加载网站时，是否可以根据浏览器大小决定图片/ div的大小？

我有以下内容告诉div是浏览器大小减去下面的内容持有者但是，它不起作用。如果我拿减号位，它可以工作但是随机高度而不是浏览器的高度。

标题下方显示的主要网站内容也是一个灵活的高度。

基本上，当您加载网站时，无论浏览器大小如何，横幅图像都应占据整个屏幕。

jQuery(document).ready(function($) {

   $(document).ready(sizeContent);

   $(window).resize(sizeContent);

   function sizeContent() {
      var newHeight = $("html").height() - $(".site_content").height()  + "px";
    $(".full_image").css("height", newHeight);
   }




});

Fiddle here

Answer 1

此：

function sizeContent() {
       var newHeight = $(window).height()  + "px";
        $(".full_image").css("height", newHeight);
    }

小提琴：http://jsfiddle.net/31gax1fk/16/

Answer 2

你可以用CSS直接做到这一点我相信vw / vh（view-width / view-height）。

虽然这会扭曲此图像，但如果您只是尝试将图像设置为浏览器大小的20％（不会扭曲），那么浏览器宽度而不是宽度和高度则可以宽度：20％;身高：自动;肯定在你的CSS？

或只是身高：100％;宽度：100％;

Answer 3

而不是用javascript调整大小和宽度我想你可能更好用css3

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

当浏览器尺寸发生变化时，它也会响应，它会自动给出一个高度，因此图像不会被拉伸

根据浏览器大小设置图像大小？

3 个答案: