html - 如何在 HTML 中的 Points 中设置图像渲染？

Question

我有一段 HTML 并使用 PT(Point) 作为渲染单元。我的 HTML 也有一个图像标签，图像的高度和宽度可以变化。所以，我不能对图像标签应用任何高度和宽度。但是当它在浏览器中呈现时，将其视为 (PX) 像素单位。但我想通过浏览器了解我的完整 HTML 是以 PT(点)为单位的。因此，也将其视为 Point。我怎样才能做到这一点？

我在使用 PX( https://jsfiddle.net/r18gasz6/1/ ) 单元和 PT( https://jsfiddle.net/r18gasz6/2/ ) 单元上创建了两个 js fiddle。如果我们看到 PT 单位 JSFiddle 字体大小，它看起来比 PX 单位字体大小 JSfiddle 大。我还希望我的图像根据 PT 单位自动调整大小。但是我事先不知道高度和宽度。所以，不能申请。请建议这是否只能通过 CSS 实现。也不能使用任何脚本。

HTML

<div class="field txtleft">
                    <span class="field" id="6DATE1">2019-01-16</span>
                    <span class="field" id="6PLAC1">NOIDA, UTTAR PRADESH</span>
                    <div id="6SURL1"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQV-Q2JYmvV8h_5cIYJ6Czg4yqONKcgOsvOZFEjkRwsFkIeGk4T3w" alt=""></div>
                </div>

CSS PX

.field{  font-size:11px;}

CSS PT

.field{  font-size:11pt;}

---

PX 结果:

(文本为 11 PX)

---

PT 结果:

(TEXT IS 11PT 与 11px 相比看起来更大)

---

Answer 1

与 px 和 pt 相比，1 pt 到 rem 的值 = 0.08333333333333333。1 px 到 rem 的值 = 0.0625。

例如，如果你想使用 pt 插入 px10px = 10pt

检查您的 reference 的文档

demo代码如下:

.field{  font-size:13px; }
.field1{  font-size:10pt;}

供您引用。

点值仅供打印!点是用于现实生活中的纸上墨水排版的测量单位。 72pts = 一英寸。一英寸 = 现实生活中的一英寸，就像尺子一样。屏幕上没有一英寸，这完全是基于分辨率的任意决定。 不建议在网页中使用点 (pt)，因为跨浏览器的结果可能会有很大差异。