我想在网格中显示缩略图。
这是我的相关代码(简化版):
addColumnVisibilityChangeListener(event -> {
if (ID_THUMBNAIL.equals(event.getColumn().getId())) {
if (event.isHidden()) {
setBodyRowHeight(-1);
} else {
setBodyRowHeight(130);
}
// needed to force rendering of current values
getDataProvider().refreshAll();
}
});
// rescale returns a (cached) ExternalResource, image is 120x120px max
// aspect ratio is preserved, so at least width or height is 120px
grid.addColumn(this::rescale, new ImageRenderer<>(this::showImage))
.setCaption(ID_THUMBNAIL)
.setStyleGenerator(r -> ID_THUMBNAIL)
.setWidth(131);
CSS 是:
.asset-grid td.thumbnail {
// height is set bij Vaadin Grid
padding: 5px;
text-align: center !important;
}
.asset-grid td.thumbnail img {
vertical-align: middle !important;
}
除了缩略图的垂直对齐外,一切正常。它显示在单元格的顶部。我尝试了几种设置,但没有任何效果。
最佳答案
这主要是基于this answer on how to vertical-align image in div通过反复试验进行一些细微的改动。
可以使用带有 fixed line-size
(例如 130)和 vertical-align: middle
的原始答案,但更新版本无论如何都提供了灵 active 您设置的高度(在 chrome 和 edge 中测试)。
代码:
import com.vaadin.event.ShortcutAction;
import com.vaadin.server.ExternalResource;
import com.vaadin.server.Resource;
import com.vaadin.ui.*;
import com.vaadin.ui.renderers.ClickableRenderer;
import com.vaadin.ui.renderers.ImageRenderer;
public class GridWithImages extends VerticalLayout {
public GridWithImages() {
// basic grid setup
Grid<User> grid = new Grid<>();
grid.addColumn(User::getId)
.setCaption("Id");
Grid.Column<User, Resource> thumbnailColumn = grid.addColumn(User::getThumbnail)
.setCaption("Thumbnail")
.setRenderer(new ImageRenderer<>(this::showImage))
.setStyleGenerator(r -> "thumbnail")
.setWidth(131);
grid.setItems(new User(1), new User(2), new User(3));
grid.setBodyRowHeight(130);
// allow to easily update height and width for testing purposes
TextField rowHeightField = new TextField("Row height", "130");
TextField thumbnailColumnWidthField = new TextField("Thumbnail width", "131");
Button button = new Button("Update", event -> {
// NOT SAFE, NOT ELEGANT, but for the sake of brevity just use those values...
grid.setBodyRowHeight(Integer.valueOf(rowHeightField.getValue()));
thumbnailColumn.setWidth(Integer.valueOf(thumbnailColumnWidthField.getValue()));
});
button.setClickShortcut(ShortcutAction.KeyCode.ENTER);
addComponents(grid, rowHeightField, thumbnailColumnWidthField, button);
}
// image renderer click handler
private void showImage(ClickableRenderer.RendererClickEvent<User> event) {
Notification.show("This will be the actual image in full size... maybe, maybe not!");
}
// basic bean for easy binding
private class User {
private int id;
private Resource thumbnail = new ExternalResource("https://www.gravatar.com/avatar/d9269818df2a058ad6bf9dbbaf1e8240?s=32&d=identicon&r=PG");
public User(int id) {
this.id = id;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public Resource getThumbnail() {
return thumbnail;
}
public void setThumbnail(Resource thumbnail) {
this.thumbnail = thumbnail;
}
}
}
主题:
td.v-grid-cell.thumbnail > img {
vertical-align: unset; // leaving it centered as inherited, shifts the image a few pixels downwards
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); // https://stackoverflow.com/questions/34551381/is-the-css3-transform-translate-percentage-values-relative-to-its-width-and-or-h
}
结果:
关于css - 瓦丁 8.2.0 : How to vertical align image in grid cell,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46682844/