在CSS中,圖片和其他元素的顯示大小可以使用像素(px)、百分比(%)或視口單位(vw、vh)等,但是它們都是相對于渲染設(shè)備的屏幕尺寸而言的,而不能直接指定厘米為單位。
如果想讓圖片按照實際的厘米尺寸來顯示,可以通過計算得出對應(yīng)的像素值,并利用CSS設(shè)置圖片的寬度和高度。
/* 計算每像素的厘米數(shù) */
var dpi = document.getElementById('realDpi').offsetHeight / 2.54;
var cmPerPixel = 1 / dpi * 2.54;
/* 設(shè)置圖片的寬度和高度 */
var widthInCm = 5;
document.getElementById('my-img').style.width = widthInCm / cmPerPixel + 'px';
document.getElementById('my-img').style.height = heightInCm / cmPerPixel + 'px';
上述代碼通過獲取實際屏幕的DPI(每英寸像素數(shù))來計算得出每像素的厘米數(shù),然后根據(jù)給定的厘米數(shù)計算出對應(yīng)的像素值并設(shè)置圖片的寬度和高度。
當(dāng)然,上述方法只是針對計算機(jī)設(shè)備的屏幕,在打印時需要用到不同的單位和計算方法,比如使用CSS的@page
規(guī)則實現(xiàn)打印頁面的樣式控制。