Почему в React под моим изображением много белого пространства? Что создает этот загадочный div? - PullRequest
Новая
       144

Почему в React под моим изображением много белого пространства? Что создает этот загадочный div?

1 голос
/ 29 мая 2020

Я создаю компонент входа в систему в React и пытаюсь добавить изображение бренда. Когда я это делаю, я получаю огромное пустое пространство под ним.

Я немного поработал над этим и обнаружил это, когда Я смотрю в инструменты разработчика, я могу продвинуться вперед, изменив этот таинственный div, который, кажется, создается Material-UI , интерфейсной структурой, которую я использую.

Снимок экрана div и влияние на макет изменения padding-top.

Когда я смотрю на это в инструментах разработчика, я обнаруживаю, что есть div с атрибутом padding-top: calc(100%), который при изменении на что-то вроде padding-top: calc(30%) уменьшает размер этого пробела под image.

Я также пробовал некоторые из базовых c решений компоновки, предложенных во многих ответах на аналогичные вопросы здесь, на SO, но ни одно из них не имеет значения. Кажется, что эта проблема с заполнением составляет суть проблемы.

Проблема

Поскольку я не знаю, что создает этот div, я не могу переопределить заполнение для работы к решению. Я пробовал изменить paddingTop и padding с помощью тега !important в стиле как изображения, так и родительского элемента изображения.

Пример кода 

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

Спасибо. Буду признателен за вашу помощь!

1 Ответ

1 голос
/ 29 мая 2020

<div> с padding-top и другими стилями поступает из компонента Image, который вы используете из material-ui-image.

Ниже приведена общая структура , визуализированная этим Image компонент : 

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

стилей. root: 

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

Когда padding-top является процентом, это процент от ширины , поэтому важно контролировать ширину контейнера, чтобы иметь предсказуемый

Вы можете изменить 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>
    </>
  );
}

Edit material-ui-image

Слегка связанный ответ (в отношении использования padding-top): Хороший способ обработки масштабирования скелета @ material-ui в строке сетки переменной высоты?

...