使用具有艺术指导的响应式图像

Question

是否可以使用响应式图像来获取适当大小的图像，并使用艺术指导在移动设备上显示不同的图像？

我还没有看到任何带有此示例的文档，但我也没有看到任何文档说你不能。

这是我认为可能有效但行不通的简化代码（原始代码是混乱的 Liquid/Shopify 代码）

<picture>
  <source 
    media="(max-width: 989px)" 
    srcset="
      image-one-300.jpg 300w,
      image-one-800.jpg 800w,
      image-one-1200.jpg 1200w,
      image-one-1800.jpg 1800w,"
    sizes="100vw"
    src="image-one_1800.jpg"
  >
  <img
  srcset="
    image-two-300.jpg 300w,
    image-two-800.jpg 800w,
    image-two-1200.jpg 1200w,
    image-two-1800.jpg 1800w,"
  sizes="100vw"
  src="image-two_1800.jpg"
  >
</picture>

Answer 1

我为移动设备分离图像的方法是简单地添加一些CSS，然后将它们分开：

CSS：

.mobileOnly {display:none;}
.desktopOnly {display:block;}
@media only screen and (max-width: 600px) {
   .mobileOnly {display:block}
   .desktopOnly {display:none;}
}

然后在 HTML 中，您可以将类添加到元素中：

<img class="desktopOnly" src="..." />
<img class="mobileOnly" src="..." />

它的伟大之处在于你可以将它用于任何东西，包括特定的 div、文本等等！

Answer 2

是的，这是可能的。查看 css 内联修复演示，图像 #8 使用响应式 + 艺术指导图像，如果您将 CSS 作为关键内联 css 的一部分，还可以解决内容回流问题。您可以阅读文章中的所有内容，它还有一个延迟加载版本。

下面是基于您的代码的未经测试的代码示例。我使用随机图像高度。

HTML：

<figure class="ixi-picture ixi-picture--fluid" data-id="img-1">
    <picture class="ixi-picture__picture ixi-picture__placeholder">
      <source media="(max-width: 1800px)" srcset="image-one-1800.jpg">
      <source media="(max-width: 1200px)" srcset="image-one-1200.jpg">
      <source media="(max-width: 800px)" srcset="image-one-800.jpg">
      <source media="(max-width: 300px)" srcset="image-one-300.jpg">
      <img alt="" class="ixi-picture__img" src="image-one-300.jpg">
    </picture>
</figure>

CSS（关键内联CSS）

/* Placeholder graphic */

.ixi-picture__placeholder {   
  background-color: #ffffd9; 
  display: inline-block;
}

/* Fluid container */

.ixi-picture--fluid { 
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: column;
}

  .ixi-picture--fluid .ixi-picture__picture {
    align-items: center;
    display: inline-flex;
    margin: 0 !important;
    max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    min-height: 100%;
    position: relative;
  }

  .ixi-picture--fluid .ixi-picture__img {
    min-width: 100%;
    min-height: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

/* Responsive picture */

@media only screen and (max-width: 300px) {

  /* Image size is 300x400 */

  [data-id='img-1'] .ixi-picture__picture  {
    padding-top: calc(400 / 300 * 100%);
    width: 300px 
  }

}


@media only screen and (max-width: 800px) {

  /* Image size is 800x410 */
  [data-id='img-1'] .ixi-picture__picture  {
    padding-top: calc(410 / 800 * 100%);
    width: 800px 
  }

}

@media only screen and (max-width: 1200px) {

  /* Image size is 1200x700 */
  [data-id='img-1'] .ixi-picture__picture {
    padding-top: calc(700 /1200 * 100%);
    width: 1200px 
  }

}

@media only screen and (max-width: 1800px) {

  /* Image size is 1800x1100 */
  [data-id='img-1'] .ixi-picture__picture {
    padding-top: calc(1100 /1800 * 100%);
    width: 1800px 
  }

}