Question

我试图在React中实现HTML“艺术指导”（针对不同的视口宽度显示不同的图像）。这是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

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

要显示小屏幕和大图像的中型图像，只需更改：

<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>;

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

1 个答案: