时间戳

首页 > 解决方案 > 响应式图像和在 ReactJS 中

reactjs - 响应式图像和在 ReactJS 中

问题描述

我正在尝试在 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 来指定它。

谢谢。

标签： reactjs

解决方案

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

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

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

推荐阅读