如何根据屏幕大小获得合适的照片(PHP）

if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
xx = window.innerWidth;
yy = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
xx = document.documentElement.clientWidth;
yy = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
xx = document.body.clientWidth;
yy = document.body.clientHeight;
}

{php} $x=1; $this->assign('varX',$x); {/php} 
    {foreach from=$offer->GetPhotos() item=photo} 
    {if $varX ==1} 
        {assign var="fotourl" value=$photo->GetImgSrc('253_161', false, false, false)}
        <div class="item active">
          <a href="oferta.html?id={$offer->GetId()}">
          <img alt="Front view of the house." class="lazyload img-responsive wp-post-image" data-original="{$photo->GetImgSrc('253_161', false, false, false)}" height="161" src="{$photo->GetImgSrc('253_161', false, false, true)}" width="253"></a>
        </div>
    {else}
        <div class="item lazy-load-item">
        <a href="oferta.html?id={$offer->GetId()}">
        <img alt="Luxury Villa In Rego Park" class="img-responsive" data-lazy-load-src="{$photo->GetImgSrc('253_161', false, false, true)}"></a>
        </div>
{/if} 
{php} $x=$x+1; $this->assign('varX',$x); {/php} 
{/foreach}

您想要的是所谓的"响应式设计"；即页面适应浏览器窗口大小的站点。这是一个非常常见的要求，涉及的不仅仅是调整图像大小。但图像大小是其中的一个方面

在当今的互联网中，为了实现良好的响应设计，您根本不需要执行任何服务器端脚本。

通过在CSS中使用@media块，页面布局可以动态适应屏幕大小。这是人们在谈论响应式设计时最常想到的事情。

通过使用两个相对较新的HTML特性：scrset和picture元素，可以使图像文件大小(您正在询问的比特(做出响应。

• scrset是现有<img>标签的新属性。它允许您为元素指定不同的图像文件，并允许浏览器根据屏幕大小选择最合适的图像文件。你会这样使用它：

  <img src="default-size.jpg" srcset="medium-size.jpg 1000w, large-size.jpg 2000w">
  

  你可以在这里阅读更多关于srcset的信息。

• picture元素更为复杂。它做了大致相同的事情，但允许开发人员对显示的图像进行更多的控制，而不是将其留给浏览器。一个例子：

  <picture>
   <source srcset="smaller-image.png" media="(max-width: 800px)">
   <img src="default-image.png">
  </picture>
  

  在本例中，当在小于800像素宽的小浏览器窗口中查看页面时，您告诉浏览器使用较小的图像，例如在移动设备上。与普通的srcset示例相比，您对它更加明确。

  从MDN了解有关图片元素的更多信息。

请注意，这两个HTML功能都是相对较新的，因此可能在较旧的浏览器上不受支持。然而，它们已经被支持了足够长的时间，现在已经为大多数人提供了支持，如果浏览器不支持它们，它们都可以默认为<img>标记中的主图像。因此，无论屏幕大小如何，IE9用户都只能看到原始的基本图像；但这至少在那个级别上对他有用。

总之，您不需要任何PHP代码，也不需要任何JavaScript代码。只是学习一些HTML的新内容。

[编辑]关于我上面提到的浏览器支持点，@FodorZoltán建议我链接到兼容性表：

• http://caniuse.com/#search=picture
• http://caniuse.com/#search=srcset

这只能通过javascript在客户端处理：(第二个方法更干净(

1. 从PHP到JS获取不同大小的图像路径
   • var images=｛"image1ID"：｛larg:"｛$image1largepath｝"，small:"｛..｝"、..｝、"image2ID"：..｝
2. 在文档加载时，在JS中获取屏幕大小
3. 循环上面的images数组，通过id(数组中的键(获取元素，并根据屏幕大小更新src属性

另一种方法是在图像上设置属性：img dynamic、large src="、small src="等，并在JS中运行一个函数来获取屏幕的大小，使用此img dynamic获取所有img元素，并根据大小将其src属性值设置为large src或small src值。

var windowH = 800, windowW = 1000;
/* First get window sizes */
function setDynamicImagePaths(to){
  var imgs = document.querySelectorAll('img[img-dynamic]');
  for(var i = 0, l = imgs.length; i < l; i++){
    imgs[i].src = imgs[i].getAttribute(to);
  }
}
/* 
 When your sure that the img elements are loaded
 ex: onload or at the end of the body
 call this
 */
window.onload = function(){
  if(windowH > 700 && windowW > 900)
    setDynamicImagePaths('src-large');
  else
    setDynamicImagePaths('src-small');
}

<img img-dynamic width='100' height='100' src-small='noimgpath' src-large='https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg'/>