регулирует размер галереи, чтобы она помещалась на экране без полей - PullRequest
Новая
       17

регулирует размер галереи, чтобы она помещалась на экране без полей

0 голосов
/ 06 мая 2019

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

так, как я уже пробовал:

  1. Я пытался изменить стиль в css-файле, я добавил "margin: 0, padding: 0", но видел, что ничего не делает.
  2. Я попытался сдвинуть изображения влево, я изменил стиль в файле css на: flex-wrap: wrap; дисплей: inline-flex; но мне не удалось добавить больше изображений в пробел.
  3. Я пытался поиграть с вычислением в функции "calcImageSize ()", но поле осталось.

если кто-то увидит, в чем проблема, я бы хотел получить помощь. Tnx. 

class Gallery extends React.Component {
  static propTypes = {
    tag: PropTypes.string
  };

  constructor(props) {
    super(props);
    this.state = {
      images: [],
      galleryWidth: this.getGalleryWidth()
    };
  }

  getGalleryWidth(){
    try {
      return document.body.clientWidth;
    } catch (e) {
      return 1000;
    }
  }
  componentDidMount() {
    this.getImages(this.props.tag);
    this.setState({
      galleryWidth: document.body.clientWidth
    });
  }

  render() {
    return (
      <div className="gallery-root">
        {this.state.images.map(dto => {
          return <Image key={'image-' + dto.id} dto={dto} galleryWidth={this.state.galleryWidth}/>;
        })}
      </div>
    );
  }
}


class Image extends React.Component {
  static propTypes = {
    dto: PropTypes.object,
    galleryWidth: PropTypes.number
  };

  constructor(props) {
    super(props);
    this.calcImageSize = this.calcImageSize.bind(this);
    this.state = {
      size: 200
    };
  }

  calcImageSize() {
    const {galleryWidth} = this.props;
    const targetSize = 200;
    const imagesPerRow = Math.round(galleryWidth / targetSize);
    const size = (galleryWidth / imagesPerRow);
    this.setState({
      size
    });
  }

  componentDidMount() {
    this.calcImageSize();
  }

  render() {
    return (
      <div
        className="image-root"
        style={{
          backgroundImage: `url(${this.urlFromDto(this.props.dto)})`,
          width: this.state.size + 'px',
          height: this.state.size + 'px'
        }}
        >
      </div>
    );
  }
}

ГАЛЕРЕЯ CSS 


.gallery-root {
  text-align: center;
}

.gallery-header {
  background-color: #222;
  padding: 10px;
  color: white;
  font-size: 20pt;
}

.gallery-intro {
  font-size: 15pt;
}

ИЗОБРАЖЕНИЕ CSS 

.image-root {
  background-size: cover;
  background-position: center center;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  position: relative;
  border: 1px solid white;

  > div {
    visibility: hidden;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: white;
    padding: 15px;
    text-align: center;
    text-align: center;
    box-sizing: border-box;
    white-space: pre;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
...