zoralabPICTURE科技规范 - ZORALab赫斯提亚

主要目的

这个软件包的出生主要是支持渲染画像的界面元件。在网络界面世界里， 这元件的成果如下：

完全配合hestiaMEDIA数据构架

虽然这个软件包提供画像的渲染功能，它所需要的数据构架是完全配合 hestiaMEDIA软件包的3合1数据构架。这个数码构架是W3C所欲望可以被渲染 成画像、影像和声像的界面元件。当需要渲染网页元件时，您最好还是运用 hestiaMEDIA功能。

历史遗录

这个软件包在ZORALab赫斯提亚v1.2.0版本之前曾经被名为 picture_hestiaUI。改名的目的是有人要横行强盗设计的版权和为了编程 文件编写能力而整理过。

设计师

这个元件的设计是由以下的创造者所建设的：

依赖其他元件

这个元件是需要以下的其他元件才能好好的运行 (排序从‘左上到右下’）：

HTML

至于HTML，为了简单化和最大的兼容性整个用法，ZORALab赫斯提亚运用W3C的语法。我们 推荐您用以下的HTML代码来运用这个界面元件。

最小的HTML

在最小的HTML代码（请通过max-height 来控制布局响应性自动调整的最大元素）运用方法如下：

<picture style='max-height: 630px;'>
	<!-- 最先进模式   -->
	<source srcset="/URL/to/image-1200x630.avif 1x,
			/URL/to/image-2400x1260.avif 2x,
			/URL/to/image-3600x1890.avif 3x"
		type="image/avif"
		width="1200" height="630"
		loading="lazy"
		media"(max-width: ...)">

	<!-- 后备模式     -->
	<source srcset="/URL/to/image-1200x630.webp 1x,
			/URL/to/image-2400x1260.webp 2x,
			/URL/to/image-3600x1890.webp 3x"
		type="image/webp"
		width="1200" height="630"
		loading="lazy"
		media"(max-width: ...)">

	...

	<!-- 最后关头方案 -->
	<source srcset="/URL/to/image-1200x630.jpg 1x,
			/URL/to/image-2400x1260.jpg 2x,
			/URL/to/image-3600x1890.jpg 3x"
		type="image/jpeg"
		width="1200" height="630"
		loading="lazy"
		media"all">
	<img alt="..." src="/URL/to/image-1200x630.jpg"
		width="1200" height="630"
		loading="lazy"/>
</picture>

CSS界面自选性

ZORALab赫斯提亚非常重用CSS变化值来装置这个界面元件并且还推出界面自选性功能。 以下是所有界面自选性CSS变化值任您发挥。

Display

影响元件的显示模式。

变化值     : --picture-display
CSS属性    : display
默认数码   : block (>= v1.2.0)

Margin

影响元件的外向边距空间。

变化值     : --picture-margin
CSS属性    : margin
默认数码   : 2rem auto (>= v1.2.0)

Padding

影响元件的内向边距空间。

变化值     : --picture-padding
CSS属性    : padding
默认数码   : 0 (>= v1.2.0)

Min-Width

影响元件的最少宽度。

变化值     : --picture-min-width
CSS属性    : min-width
默认数码   : initial (>= v1.2.0)

Width

影响元件的宽度。

变化值     : --picture-width
CSS属性    : width
默认数码   : auto (>= v1.2.0)

Max-Width

影响元件的宽度。

变化值     : --picture-max-width
CSS属性    : max-width
默认数码   : 100% (>= v1.2.0)

Min-Height

影响元件的最少高度。

变化值     : --picture-min-height
CSS属性    : min-hieght
默认数码   : initial (>= v1.2.0)

Height

影响元件的高度。

变化值     : --picture-height
CSS属性    : height
默认数码   : auto (>= v1.2.0)

Max-Height

影响元件的最大高度。

变化值     : --picture-max-height
CSS属性    : max-height
默认数码   : initial (>= v1.2.0)

User Select能力

影响元件选择能力的控制条件。

变化值     : --picture-user-select
CSS属性    : user-select
默认数码   : none (>= v1.2.0)

User Drag能力

影响元件拖动能力的控制条件。

变化值     : --picture-user-drag
CSS属性    : user-drag
默认数码   : none (>= v1.2.0)

JavaScript

庆幸的是这个元件没有运用到任何JavaScript。放心吧！

ToCSS

渲染呈现CSS的输出数据。

Hugo

用法：

{{- $ret := partial "hestiaGUI/zoralabPICTURE/ToCSS" . -}}
<pre>{{- printf "%#v\n" $ret -}}</pre>