Question

当在HTML上重复相同的HTML时，根据大小显示响应图像。

我正在HTML下方渲染，该HTML在（Chrome / Firefox / IE）中运行良好。我正在使用CSS渲染div并使用媒体查询更改背景图片。
但是，如果在页面上再次使用相同的模板使用不同的图像，然后在两个CSS上都使用相同的模板“ market-promo-item__image”，则将只能应用并显示一个图像。

不过，它在所有尺寸的Chrome，Firefox中都可以正常工作。

<div class="market-product-item__image-wrapper">
  <div class="market-product-item__image"><!----></div>
  <style>
    @media only screen and (min-width: 1024px) {
      .market-promo-item__image {
        background-image: url('//images.cloudfront.net/media/hero6-1_1920x520.jpg');
      }
    }
  </style>
  <div class="market-promo-item__image"><!----></div>
  <style>
    @media only screen and (min-width: 769px) and (max-width: 1023px) {
      .market-promo-item__image {
        background-image: url('//images.cloudfront.net/media/hero6-1_800x456.jpg');
      }
    }
  </style>
  <div class="market-promo-item__image"><!----></div>
  <style>
    @media only screen and (max-width: 768px) {
      .market-promo-item__image {
        background-image: url('//images.cloudfront.net/media/hero6-4_400x520.jpg');
      }
    }
  </style>
 </div>

我尝试使用“图片”元素方法，但在IE11中不起作用。在IE 11中，它正在加载<img>标签中“ src”属性中设置的图像，但是在IE11中更改（尺寸）大小时，它并没有根据屏幕尺寸从srcset标签中选择正确的图像。

<picture>
  <source media="(max-width: 767px)" srcset="https://image.cloudfront.net/media/promo_big_550x470.jpg?h=j14yy1b">
  <source media="(max-width: 1023px)" srcset="https://image.cloudfront.net/media/promo_big1200x470.jpg?h=fgfqhin">
  <img class="market-promo-item__image lazy loaded" src="https://image.cloudfront.net/media/promo_big_1920x470.jpg?h=jcp5yqn " data-was-processed="true">      
</picture>

Answer 1

我建议尽量避免使用内联CSS。如果我正确理解了您的问题，那么当您在同一页面上多次使用同一模板时，图像会被覆盖的原因是浏览器解析HTML和CSS文档的方式：最后应用的样式，就是这样（考虑到它们都具有相同的特异性，根据您的代码判断，它们具有相同的特异性。）

要解决您的问题，我建议您使用3个img标签-一个img用于一种分辨率。并为三种类型的img添加类，以便根据分辨率显示/隐藏它们。示例：

<div class="market-product-item__image-wrapper">
  <div class="market-product-item__image">
    <img class="big-screen-img" href="//images.cloudfront.net/media/hero6-1_1920x520.jpg" alt="">
    <img class="medium-screen-img" href="//images.cloudfront.net/media/hero6-1_800x456.jpg" alt="">
    <img class="small-screen-img" href="//images.cloudfront.net/media/hero6-4_400x520.jpg" alt="">
  </div>
</div>

现在您可以添加此CSS，以显示/隐藏不同屏幕分辨率的图像：

.big-screen-img, .medium-screen-img, .small-screen-img {
    display: none;
}

@media only screen and (min-width: 1024px) {
  .big-screen-img {
    display: block;
  }
}

@media only screen and (min-width: 769px) and (max-width: 1023px) {
  .medium-screen-img {
    display: block;
  }
}

@media only screen and (max-width: 768px) {
  .small-screen-img {
    display: block;
  }
}

这样，您可以在整个页面中使用相同的结构（在需要的地方重复该结构），并仅基于分辨率显示所需的图像。如果要在文档的其他部分添加其他图像，则只需将src更改为新图像。

希望有帮助。

通过媒体查询CSS或嵌入式模板中的内联backgroundImage进行响应的图像

1 个答案: