Как установить размер компонента изображения в Vaadin и сохранить соотношение сторон

У меня есть компонент изображения, который я хотел бы определить размер 500px на 500px. Проблема в том, что мое изображение не квадрат, но я хотел бы сохранить соотношение сторон при нажатии StreamResource на мой компонент изображения. Как я могу сделать это, кроме изменения размера изображения вручную? Другими словами, есть ли что-то внутри компонента изображения, что позволяет мне автоматически изменять размер изображения, не заставляя его становиться квадратом?

7
java vaadin vaadin8

3 ответов

решение, которое я получил, состояло в том, чтобы изменить размер изображения перед отправкой его в пользовательский интерфейс. Другими словами, я делаю некоторые вычисления, где, если изображение больше 500, я затем смотрю, является ли это высотой или шириной, а затем использую то, что является самым большим в качестве базовой линии. Затем я умножаю соотношение сторон на другое измерение и преобразую изображение соответственно.

Так, например, если у меня есть изображение 800x600, я буду предполагать использовать 800 в качестве базовой линии, то есть 500/800 это означает, что изображение должно быть уменьшено до 62,5% от его размера. Затем я уменьшаю 600 на 62,5%, как в 600 * 0,625 = 375. Поэтому я изменяю размер изображения с помощью библиотеки изображений до 500x375. И если изображение было 600x800, я бы изменил его размер до 375x500. Другими словами, я предварительно обрабатываю изображение и полагаюсь на что-либо в GUI, чтобы управлять этим для меня.

2

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

в первую очередь изменить свой mytheme.scssfile и добавьте запись css. Должно выглядеть примерно так

@mixin mytheme {
  @include valo;

  .maxSize500 {
    max-width: 500px;
    max-height: 500px;
  }

}

чтобы применить это правило с помощью кода используйте addStyleName и установите размер в undefined. Ex:

myImageComponent.setSizeUndefined(); // this line may not be needed in your project (it wasn't in mine)
myImageComponent.addStyleName("maxSize500");

Теперь создайте, повторно запустите свой проект, и вы должны быть g2g.

hths!

1

я столкнулся с этой же проблемой. Мне пришлось создать свою собственную логику для изменения высоты и ширины изображения(ов) на основе ширины пикселя браузера. Я не верю, что есть что-то из коробки в фреймворк Vaadin, который может справиться с этим.

что-то вроде этого:

    if (browserWidth <= 1250){
        height = x;
        width = x;
    }else if (browserWidth <= 1500){
        height = x;
        width = x;
    }else if (browserWidth <= 1750){
        height = x;
        width = x;
    }else if (browserWidth <= 2000){
        height = x;
        width = x;
    }else {
        height = x;
        width = x;
    }

надеюсь, что это поможет.

-2