如何在移动设备上使Wordpress图像缩放？

Question

我的浏览器中有一些wordpress内容，当在移动设备上时，文本可以很好地缩放，但是图像根本无法缩放。

网站外观示例：

在台式机上

在移动设备上

如您所见，图像没有像文本一样正确缩放。

这是我在Wordpress中插入文本和图像的方式：

以下是代码：

<div style={{ width: '100%', overflowX: 'hidden', overflowY: 'scroll' }}>
<Segment basic>
  <Card
    style={{
      boxShadow: 'none',
      borderWidth: 0,
      paddingTop: '1em',
      margin: '0',
    }}
  >
    <Card.Content>
      <Image
        floated="left"
        size="large"
        avatar
        src={authors.filter(a => a.id === blog.author)[0].avatar_urls[48]}
      />
      <Card.Header>
        {authors.filter(a => a.id === blog.author)[0].name}
      </Card.Header>
      <Card.Meta>
        {new Date(blog.date).toLocaleDateString('en-US', options)}
      </Card.Meta>
    </Card.Content>
  </Card>

  <Header
    as="h1"
    content={title}
    style={{
      fontSize: '2.5em',
      textAlign: 'left',
      marginBottom: '1em',
      paddingLeft: '20px',
    }}
  />
  <Segment
    basic
    style={{
      paddingBottom: '3em',
      fontSize: '1.2em',
      width: '100%',
    }}
  >
    {ReactHtmlParser(content)}
  </Segment>
</Segment>

如何解决此问题？