主页 / 问题 / 646607
Accepted
ruslik
Asked:2020-03-31 16:04:24 +0000 UTC2020-03-31 16:04:24 +0000 UTC

如何制作响应式图片？

  • 772

你能告诉我如何制作响应式图像吗？

你想要什么：

  1. 每个断点都有自己的图像加载
  2. 考虑到视网膜显示器的图像
  3. 图像被缩放
javascript

2 个回答

  1. Best Answer

    创造最适应的图像，设计合适

    <picture>
  <source media="(media-query-1)" sizes="(media-query-1.1) x, y" srcset="images/ordinary.jpg">
  <source media="(media-query-2)" sizes="(media-query-2.1) z, w" srcset="images/ordinary-2.jpg">
  <img src="images/ordinary.jpg">
</picture>
    1. 假设您希望在高达 400 像素的屏幕上显示一幅图像，在更大的屏幕上显示另一幅图像。我们这样做：
    <picture>
  <source media="(max-width: 400px)" srcset="images/ordinary.jpg">
  <source media="(min-width: 401px)" srcset="images/ordinary2.jpg">
  <img src="images/ordinary2.jpg">
</picture>
    1. 您还需要考虑像素密度。然后需要srcset在属性中指定几个图片路径，写1x,2x如果需要的话， then ,用空格分隔3x。x允许您访问device-pixel-ratio。
    <picture>
  <source media="(max-width: 400px)" srcset="images/ordinary.jpg 1x, images/ordinary-retina.jpg 2x, images/ordinary-hd.jpg 3x">
  <source media="(min-width: 401px)" srcset="images/ordinary2.jpg 1x, images/ordinary2-retina.jpg 2x, images/ordinary2-hd.jpg 3x">
  <img src="images/ordinary2.jpg">
</picture>
    1. 您还需要不同断点的不同图像大小，这就是sizes. 我们将实现以下场景： 1）对于小于 800 像素的屏幕，将有一个图像ordinary.jpg， 1.1）对于 400 像素或更小的屏幕，图像的宽度100vw为 ，否则将占用70vw；2) 对于大于 800 像素ordinary2.jpg的屏幕，2.2) 对于大于 1400 像素的屏幕，它的宽度为40vw，否则为50vw。
    <picture>
  <source media="(max-width: 800px)" sizes="(max-width: 400px) 100vw, 50vw" srcset="images/ordinary.jpg 1x, images/ordinary-retina.jpg 2x, images/ordinary-hd.jpg 3x">
  <source media="(min-width: 801px)" sizes="(min-width: 1400px) 40vw, 50vw" srcset="images/ordinary2.jpg 1x, images/ordinary2-retina.jpg 2x, images/ordinary2-hd.jpg 3x">
  <img src="images/ordinary2.jpg">
</picture>
    • 7

  2. 您可以使用属性srcset(HTML5)

    该属性可以代替src并允许您指定不同的URL图像。属性值是一个或多个逗号分隔的字符串。每行包含：

    1. 图片文件网址

    2. 可选地，空格后跟以下之一：

      -- 宽度值viewport（必须是一个正整数后跟一个“ w”字符）。宽度描述符除以 sizes 属性中给出的源大小，以计算有效像素密度。
      -- 像素密度值（正数后跟一个“ x”字符），默认为1x.

    可以通过媒体查询:after++ background-image。

    • 4

相关问题