Reactjs: как минимально обрезать изображение до определенного соотношения сторон на стороне клиента?

Question

В, я бы хотел обрезать изображение минимальным образом, чтобы оно соответствовало заданному соотношению сторон.

Пример: учитывая изображение, скажем, 3038 x 2014 px, я хочу обрезать его, чтобы иметь соотношение сторон 1: 2. Тогда полученное изображение будет иметь размер 3021 x 2014 px, вырезанный, скажем, из центра исходного изображения.

Answer 1

Вы можете использовать CSS для обрезки изображения, это называется «отсечение» в CSS и свойство clip.

clip: rect(top-left-pixel-x, top-left-pixel-y, bottom-right-pixel-x, bottom-right-pixel-y);

Если бы это не было адаптивным, вы бы просто добавили нужные пиксели вручную. Изображение 3/2, поэтому вам необходимо указать, какую часть изображения вы хотите показать.

Давайте сделаем среднюю горизонтальную секцию здесь.

clip: rect(0, 1007px,  2014px, 2014px);

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

  componentDidMount() {
    const height = this.divElement.clientHeight;
    const width = this.divElement.clientWidth;
    this.setState({ style: `clip: rect(0, ${heigh/3}, width, ${2*height/3}` ); 

    // Note: if the starting img is always 3:2 ratio, the final value could be the width because 3:2 -> 2:! has that natural property, but this code is more flexible
  }

  render() {
    return (
      <img src="[your file source]" style={style}/>
    )
  }