为什么 React 中我的图像下方有大量空白区域？是什么创造了这个神秘的 div？

Question

我正在 React 中构建一个登录组件，并尝试添加品牌形象。当我这样做时，我会在其下方获得大量的空白。

我已经在这方面工作了一段时间，我发现，当我查看开发工具时，我可以通过修改这个似乎由 Material-UI 创建的神秘 div 来取得进展，我正在使用的前端框架。

当我在开发工具中查看此内容时，我发现有一个属性为 padding-top: calc(100%) 的 div，当修改为 padding-top: calc(30%) 之类的内容时，会减小图像下方此空白的大小。

我还尝试了 SO 上类似问题的许多答案中建议的一些基本布局解决方案，但它们都没有任何作用。似乎这个填充问题是问题的核心。

问题

因为我不知道是什么创建了这个 div，所以我无法覆盖填充以寻求解决方案。我尝试在图像的样式和图像的父元素中使用!important 标签修改paddingTop 和padding。

代码示例

          <Paper variant='outlined' style={{ width: '380px' }}>
            <Box m={4}>
              <Image 
                src='../static/images/TextLogo.svg' 
                imageStyle={{
                  height: 'auto',
                  width: '100%',
                }}  
              />
            </Box>
          ...

堆栈

"@material-ui/core": "^4.0.0-alpha.8",
"material-ui-image": "^3.2.3",
"next": "^8.1.0",
"react": "^16.8.6",
"react-dom": "^16.8.6"

谢谢。非常感谢您的帮助！

Answer 1

带有padding-top 和其他样式的<div> 来自您正在使用的Image 组件material-ui-image。

下面是整体结构rendered by that Image component：

      <div
        style={styles.root}
        onClick={onClick}
      >
        {image.src && <img
          {...image}
          style={styles.image}
          onLoad={this.handleLoadImage}
          onError={this.handleImageError}
        />}
        <div style={styles.iconContainer}>
          {!disableSpinner && !this.state.imageLoaded && !this.state.imageError && loading}
          {!disableError && this.state.imageError && errorIcon}
        </div>
      </div>

padding-top 是styles.root 中样式的一部分。

styles.root:

    const styles = {
      root: {
        backgroundColor: color,
        paddingTop: `calc(1 / ${aspectRatio} * 100%)`,
        position: 'relative',
        ...style
      },

当padding-top 是一个百分比时，它就是一个percentage of the width，因此控制容器的宽度以具有可预测的行为很重要。

您可以修改padding-top，方法是通过style 属性显式覆盖它，或者在aspectRatio 属性中指定适当的值。默认情况下，此 Image 组件假定为方形图像 (aspectRatio: 1)。

这是一个工作示例，展示了控制padding-top 的两种方式：

import React from "react";
import Image from "material-ui-image";
import Box from "@material-ui/core/Box";

export default function App() {
  return (
    <>
      <Box m={4} width={200}>
        <Image
          aspectRatio={1.5}
          src="https://www.publicdomainpictures.net/pictures/10000/velka/black-monkey-11280155875i3QV.jpg"
        />
        Something under image 1
      </Box>
      <Box m={4} width={200}>
        <Image
          style={{
            paddingTop: "calc(66.7%)"
          }}
          src="https://www.publicdomainpictures.net/pictures/10000/velka/black-monkey-11280155875i3QV.jpg"
        />
        Something under image 2
      </Box>
    </>
  );
}

稍微相关的答案（关于padding-top的使用）：A good way to handle @material-ui Skeleton scaling within a variable height grid row?