Question

我有一些页面速度的问题取决于我从服务器获得的图像，只是想知道是否可以根据显示页面的屏幕获得不同的文件。我找到了

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;
}

这可能是供以后使用的变量，主要是我专注于方面，如果有可能获得不同的img大小througt

{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}

我希望能够获得适用于桌面和移动设备的不同大小的照片提前谢谢

Answer 1

您正在寻找的是“响应式设计”;也就是说，作为页面适应浏览器窗口大小的站点。这是一个非常常见的要求，并且不仅仅是调整图像大小。但图像尺寸是它的一个方面。

在今天的互联网上，您根本不需要进行任何服务器端脚本编写，以实现良好的响应式设计。

通过使用CSS中的cond: { $eq: [ "$$pet.age", { $max: "$pets.age" } ] }块，页面布局可以动态适应屏幕大小。这是人们在谈论响应式设计时最常见的事情。

可以使用两个相对较新的HTML功能（@media和scrset元素来响应图像文件大小（您要询问的位）。

picture是现有scrset代码的新属性。它允许您为元素指定不同的图像文件，并允许浏览器根据屏幕大小选择最合适的图像文件。你可以像这样使用它：
```
<img>
```
You can read more about srcset here
<img src="default-size.jpg" srcset="medium-size.jpg 1000w, large-size.jpg 2000w">元素更复杂。它做了很多相同的事情，但允许开发人员更精确地控制显示哪个图像，而不是将其留在浏览器中。一个例子：
```
picture
```
在此示例中，您告诉浏览器在小于800像素宽的小浏览器窗口中查看页面时使用较小的图像，例如可能在移动设备上。你比普通的<picture> <source srcset="smaller-image.png" media="(max-width: 800px)"> <img src="default-image.png"> </picture>例子更明确。

Find out more about the picture element from MDN

请注意，这两个HTML功能都相对较新，因此旧浏览器可能不支持这些功能。但是，它们已得到足够长时间的支持以便为大多数人提供支持，如果浏览器不支持这两个版本，则它们都会默认为srcset标记中的主图像。因此，无论屏幕大小如何，您的IE9用户都只能看到原始基本图像;但至少在那个层面上对他有用。

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

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

Answer 2

这只能通过javascript在客户端处理:(第二个方法更清晰）

从PHP到JS获取不同大小的图像路径
- var images = {＆＃39; image1ID＆＃39; ：{large：＆＃39; {$ image1largepath}＆＃39;，small：＆＃39; {..}＆＃39;，..}，＆＃39; image2ID＆＃39;：..};
在文档加载中获取JS中的屏幕大小
循环上面的图像数组，通过id获取元素（这是数组中的键），并根据屏幕大小更新src属性

另一种方法是在图片上设置属性：img-dynamic，large-src =＆＃39;＆＃39;，small-src =＆＃39;＆＃39;在JS中运行一个可以获得屏幕大小的函数，使用这个img-dynamic获取所有img元素，并根据大小将其src属性值设置为large-src或small-src值。

＆＃13;

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');
}

＆＃13;

<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'/>

＆＃13;

如何根据屏幕尺寸获得正确的照片（PHP）？

2 个答案: