问题解决:百分比宽度页面缩放会变形

简介: 问题解决:百分比宽度页面缩放会变形

在做vue项目的时候,把整个页面写完了,但是在对页面进行缩放的时候发现图形会变形,如下图所示:

①页面在缩放时,输入框会越过设定在中间的间距4350c2d9a73e4da284a25a2a5897a947.png

②输入框右边消失

2791b6d5039f41f7918192bb85e3f2ba.png

最后发现出现问题的原因是用百分比设置了父元素(整个框架)后,在子元素(输入框)用了px取设置宽度和外边距

解决办法:父元素设置了百分比width:100%;后,子元素的宽度也必须用百分比去设置,行内样式去设置margin-left之类的,也要用百分比,不要用px去写

.父元素{
  width:100%;
  height:100%;
  .子元素{
  width:80%;
  height:80%;
}

<子元素 style=‘width:80px;height:80px;’>

同理,如果想要整个页面在缩放时也保持一致,宽度高度都是用百分比去写,不要忘记给父元素设置百分比

相关文章
|
6月前
|
Python
缩放
【5月更文挑战第15天】缩放。
58 1
|
4月前
|
机器学习/深度学习 前端开发 算法
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
77 0
|
4月前
|
存储 前端开发 JavaScript
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
402 0
|
前端开发
CSS设置标签、图片,放大、缩小、旋转、移动、倾斜(transform)
CSS设置标签、图片,放大、缩小、旋转、移动、倾斜(transform)
|
前端开发
响应式 - 基于宽度百分比的图像缩放
响应式 - 基于宽度百分比的图像缩放
144 0
响应式 - 基于宽度百分比的图像缩放
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小
161 0
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小
|
Java Maven
thumbmailator组件对图像的使用缩放、裁剪、旋转、格式钻换
thumbmailator组件对图像的使用缩放、裁剪、旋转、格式钻换
149 0
div高度自适应宽度按比例放大
导语:我们经常会碰到这样的需求:要求div高度跟随宽度变化而变化。在手机端,一张图片作为div的背景图,图片宽高比不一致,并要求div宽高比与图片宽高比一致;怎么实现这种需求呢? 原理 padding-top: 50%;用这个属性的百分比,padding-top的百分比是相对于父元素的宽度,比如:...
1741 0
|
Web App开发 程序员 容器