img {
+ width: auto;
+ height: 100%;
+ }
+ }
+
&-thumb--w-full > img {
width: 100%;
height: auto;
diff --git a/scss/components/form/_image.scss b/scss/components/form/_image.scss
index ada6a83bd..8fd1b01e5 100644
--- a/scss/components/form/_image.scss
+++ b/scss/components/form/_image.scss
@@ -94,8 +94,9 @@
width: px2rem(108px);
height: px2rem(108px);
display: none;
- top: px2rem(5px);
- left: px2rem(5px);
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
@@ -253,4 +254,15 @@
line-height: 120px;
text-align: center;
}
+
+ &-fixed-size {
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ }
+
+ &-fixed-size &-itemOverlay {
+ width: 100%;
+ height: 100%;
+ }
}
diff --git a/src/renderers/Form/Image.tsx b/src/renderers/Form/Image.tsx
index f01d6bf34..6673b34c7 100644
--- a/src/renderers/Form/Image.tsx
+++ b/src/renderers/Form/Image.tsx
@@ -23,6 +23,7 @@ import {
SchemaTokenizeableString,
SchemaUrlPath
} from '../../Schema';
+import {filter} from '../../utils/tpl';
/**
* Image 图片上传控件
@@ -222,6 +223,21 @@ export interface ImageControlSchema extends FormBaseControl {
autoFill?: {
[propName: string]: SchemaTokenizeableString;
};
+
+ /**
+ * 默认图片地址
+ */
+ defaultImage?: SchemaUrlPath;
+
+ /**
+ * 是否开启固定尺寸
+ */
+ fixedSize?: boolean;
+
+ /**
+ * 固定尺寸的 CSS类名
+ */
+ fixedSizeClassName?: SchemaClassName;
}
let preventEvent = (e: any) => e.stopPropagation();
@@ -933,7 +949,7 @@ export default class ImageControl extends React.Component<
Math.abs(width / height - limit.aspectRatio) > 0.01
) {
error = __(limit.aspectRatioLabel || 'Image.limitRatio', {
- ratio: limit.aspectRatio
+ ratio: limit.aspectRatio.toFixed(2)
});
}
@@ -1095,6 +1111,9 @@ export default class ImageControl extends React.Component<
thumbMode,
thumbRatio,
reCropable,
+ defaultImage,
+ fixedSize,
+ fixedSizeClassName,
translate: __
} = this.props;
@@ -1170,12 +1189,17 @@ export default class ImageControl extends React.Component<
? files.map((file, key) => (