如何解决需要使用变换和缩放正确定位溢出的 div
我有一个固定的和高度的 div,有大量的元素绝对相对于它定位。但是,并非所有内容都会同时显示。我必须transalteX
、translateY
和scale
才能正确显示。
内容的图片示例:
红色方块是内容,白色方块是固定大小的 div,黄色方块是屏幕。
但是,出于响应的原因,我必须计算比例,以便内容可以适合任何屏幕。
我有这个功能,它可以在 1920*1080 屏幕上工作,但在其他分辨率(例如 1366*768)上无法正常工作:: >
const calcRatioToFitContent = (
contentWidth: number,contentHeight: number,screenWidth: number,screenHeight: number,) => {
/**
* Base code:
* https://stackoverflow.com/questions/6565703/math-algorithm-fit-image-to-screen-retain-aspect-ratio
*/
const contentRatio = contentWidth / contentHeight;
const screenRatio = screenWidth / screenHeight;
const widthToFit =
screenRatio > contentRatio
? (contentWidth * contentHeight) / screenHeight
: screenWidth;
const heightToFit =
screenRatio > contentRatio
? screenHeight
: (contentHeight * contentWidth) / screenWidth;
const ratioWidth = screenWidth / widthToFit;
const ratioHeight = screenHeight / heightToFit;
/**
* Return lower value,so it can be rendered on any device.
*/
return [ratioWidth,ratioHeight].sort()[0];
};
contentWidth = x2 - x1; contentHeight = y2 - y1,返回到 scale
我这样做对吗?有什么解决方案,利用这个相同的大尺寸 div?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。