Question

我喜欢img代码在响应式设计中的工作方式。它按比例调整大小并扩展包含它的div。问题是图像在每个尺寸上都是相同的像素数，这对移动设备来说很糟糕。

我想到了一种方法，可以在标记中使用带有宽度和高度属性的1x1像素PNG图像来定义比例。这样，你的div将根据PNG按比例调整大小，你可以用媒体查询交换背景。并且您可以在整个页面中多次使用它，只需要一个http请求。

这种攻击响应式图像的方式有问题吗？

.container {
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  background-repeat: no-repeat;
  border: 1px solid blue;
  background-image: url(large.png)
}

@media screen and (max-width: 968px) {
  .container {
    background-image: url(small.png)
  }
}

img {
  width: 100%;
  height: auto;
}

<div class="container">
  <img src="1x1.png" width="5" height="1">
</div>

Answer 1

是的，可访问性存在问题。 html中的图像意味着...嗯，有意义。因此，您需要在CSS中使用html和有意义的图像放置无意义的图像，在屏幕阅读器中它们完全没有任何插件集（例如）。

此外，我猜你是否计划加载大图像来处理不需要它们的设备上的视网膜显示器，并且只是＆＃34;调整大小＆＃34;？

您可以更好地处理像素大小的移动设备，例如srcset：https://developer.mozilla.org/en/docs/Web/HTML/Element/Img#Example_3_Using_the_srcset_attribute

或图片元素：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

http://caniuse.com/#feat=srcset http://caniuse.com/#feat=picture

Answer 2

如果您的目标是最小化HTTP请求，HTML5会提供<picture>元素：

4.8.2 The picture element

picture元素是一个提供多个来源的容器   到其包含的img元素，以允许作者以声明方式   控制或向用户代理提供关于哪个图像资源的提示   使用，根据屏幕像素密度，视口大小，图像格式，   和其他因素。

使用此元素，您可以允许浏览器根据媒体查询选择适当的图像：

<picture>
    <source srcset="large.png" media="(min-width: 1000px)">
    <source srcset="standard.png" media="(min-width: 600px) and (max-width: 999px)">
    <source srcset="small.png" media="(max-width: 599px)">
    <img src="standard.png" alt="accessibility text here"><!-- graceful degradation -->
</picture>

请注意，此元素尚未享受通用浏览器支持：http://caniuse.com/#search=picture

如果需要，这里是一个填充物：https://scottjehl.github.io/picturefill/

参考文献：

The <picture> element ~MDN
Better Responsive Images With the picture Element ~envatotuts +
Built-in Browser Support for Responsive Images ~HTML5 Rocks

具有1x1像素PNG的更好的响应式图像？

2 个答案: