reactjs - ReactJS 中带有 <picture> 和 <source> 的响应式图像

Question

我正在尝试在 React 中实现 HTML-“艺术方向”(为不同的视口(viewport)宽度显示不同的图像)。这是 JSX:

import LogoImg from "../../abstracts/media/logo-large.svg";
import LogoImgMedium from "../../abstracts/media/logo-medium.svg";

<picture>
   <source srcSet={`${LogoImgMedium} 1x, ${LogoImg} 2x`} media="(max-width: 37.5em)" />
   <img 
      className="logo__apple" 
      srcSet={`${LogoImgMedium} 1x, ${LogoImg} 2x`} 
      alt="Full Logo"
      src={LogoImgMedium} />
 </picture>

media 属性中定义的断点似乎不起作用。你们知道为什么吗？我尝试用 px、rem 和 em 来指定它。

谢谢。

Answer 1

您刚刚在 source 和 img 元素的 srcSet 属性中指定了相同的值，这将为所有宽度显示相同的图像。这可能会有所不同，但在这种情况下浏览器更有可能选择中等图像。

要为小屏幕和大图像显示中图像，只需更改:

<picture>
   <source srcSet={`${LogoImgMedium} 1x, ${LogoImg} 2x`} media="(max-width: 37.5em)" />
   <img 
      className="logo__apple" 
      srcSet={`${LogoImgMedium} 1x, ${LogoImg} 2x`} 
      alt="Full Logo"
      src={LogoImgMedium} />
 </picture>

至:

<picture>
  <source srcSet={`${LogoImgMedium} 1x`} media="(max-width: 500px)" />
  <img
    className="logo__apple"
    srcSet={`${LogoImg} 2x`}
    alt="Full Logo" />
</picture>;