Question

HeJ小鼠，我有一个JavaScript解决方案，用于检查屏幕大小和选择匹配的图片。但不幸的是，我失去了它。

我的问题：我想选择与屏幕尺寸有关的标题图片（无法响应CSS）。 1920x1080的访客将看到与此尺寸相符的图片。对于通常的尺寸，我将构建特殊的标题图片。

当访问者禁用JavaScript时，他应该看到标准图片。

移动设备有自己的标题。

任何人都可以帮忙...谢谢：）

最诚挚的问候玛德琳

Answer 1

您可以通过多种方式检查屏幕尺寸：

如果您使用的是 jQuery ，则可以通过以下方式使用屏幕对象：

screen.width;

您还可以使用以下方式获取窗口或文档的大小：

$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

这是一个纯粹的 JavaScript ：

的跨浏览器解决方案

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

关于不使用媒体查询的响应式图像， Flexbox 是一个很好的解决方案：

＆＃13;

body { margin: 0; background: #333; }
header { 
  padding: .5vw;
  font-size: 0;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
  display: -webkit-box;
  display: flex;
}
header div { 
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto; 
  width: 200px; 
  margin: .5vw; 
}
header div img { 
  width: 100%; 
  height: auto; 
}

＆＃13;

<header>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-2.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-4.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-5.jpg" alt></div>
</header>

＆＃13;

调整此Codepen的大小以查看 Flexbox响应式标头

如果标题图片设置为background image，您可以设置：

background-size: contain

background-size: cover

希望这可以帮到你。

Answer 2

如果您正在使用jQuery，则可以检查屏幕大小（文档结构准备就绪时）并根据您想要的图像显示：

$(document).ready(function() {

  if ($(window).width() < 960) {
     $('selector').css({'background-image':'url(images/small-
  image.jpg)'});

  }
  else {
     $('selector').css({'background-image':'url(images/big-image.jpg)'});
  }

});

获取屏幕大小以选择匹配的标题图片

2 个答案: