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

Question

是否可以在首次加载网站时根据浏览器大小指定 image/div 的大小？

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

显示在 header 下方的主要站点内容也将是一个灵活的高度。

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

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

您可以在 CSS 中直接执行此操作，我相信 vw/vh (view-width/view-height)。

虽然这会扭曲图像，但如果您只是想使图像成为浏览器大小的 20%（不扭曲），那么浏览器宽度而不是宽度和高度，那么您可以只设置宽度：20% ;高度：自动；在你的 CSS 肯定？

或者只是身高：100%；宽度：100%；

Answer 2

而不是在使用 javascript 调整大小时指定高度和宽度，我认为您最好使用 css3

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

当浏览器大小改变时，这也是响应式的，它会自动给出一个高度，这样图像就不会被拉伸

Answer 3

这个?:

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

Fiddle: http://jsfiddle.net/31gax1fk/16/

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

Set image size based on browser size?

html

css

jquery

resize

window-resize