2024年没人告诉你的实战工作中前端技巧

1、在页面的窗口发生变化时如何保证图片内容的原始宽高比？

第一步在父容器中设置：

resize:both;

overflow:auto;

第二步在子容器图片css中设置最大宽度和最大高度

max-width：100%；

max-height：100%；

aspect-ratio: 1/1  （代表宽高比例），auto 表示默认值，保持原始比例

2、在页面存在遮罩层，且遮罩层的下一层包含点击事件，由于遮罩层的优先级会影响点击事件按钮，导致无法触发点击事件，该如何用css解决？

pointer-events-

auto：默认值，响应点击事件  、

none：不响应点击事件，由下层元素响应。