利用css怎样实现宽和高的比例是1:1

Posted 2023-05-06

利用css怎样实现宽和高的比例是1:1

css3有两个新单位，vw和vh,vw表示占用父元素宽度的百分比，vh表示父元素高度的百分比，如20vw表示元素宽度为父元素宽度的百分之二十，你设置宽度和高度都为20vw，就能实现正方形的效果。不过有个bug，就是现在浏览器对css3的支持度不是很大，有些浏览器不支持 参考技术A 视窗宽度是100vw 不是你说的相对于父级的百分比。
无法通过css直接设置宽高比例自适应。
需要用js 来设置，先取元素宽度，然后设置元素高度等于取到的宽度。
随便乱说都能被采纳为最佳 真是可笑 参考技术B 1 ： 1 设置宽度和高度都一样

图片上传时获取图片的宽和高

　　经常会遇到图片上传的问题，这时候我们会传图片的地址，宽和高到服务器，至于图片上传就不说了，这里主要说图片上传时获取图片的原始宽和高的问题。

　　一般而言，我们把图片上传至服务器时，服务器会返回一个上传地址给我们，这个就是我们图片的url了，但是光有这个还是不够的，因为还要将图片的宽和高传给服务器，这时候就可以这样做了。直接上代码：　　

var img = new Image()
img.src = url

　　然后就可以使用img.width和img.height来获取图片的宽和高了。当然仅仅这样做是不够的，因为图片上传是异步的，并不能直接使用该方法获取图片的宽和高，这样获取到的都是0.

　　必须将上传的图片放置body标签里面才能去使用load事件，可以使用appendChild将img标签插入body标签里面（document.getElementsByTagName(‘body‘)[0].appendChild(img)），这样做会有一个问题，每次上传图片后页面底部都会多一张图，可以使用 display将其隐藏，然后使用onload方法，等图片加载完。　

img.onload = function(){
  w = img.width;
  h = img.height        
}

　　然后将要发的请求放在一个方法里面，在onload事件里面去调用方法，否则load方法外面是获取不到宽和高的。

 

　　当然了，还有另外一种方法，就是使用ES6的办法。　

async function foo(){
 	let img = new Image()
 	img.src = ‘https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2546717774,3910079056&fm=200&gp=0.jpg‘
 	document.getElementsByTagName(‘body‘)[0].appendChild(img) // 图片插入body标签中，否则无法执行load事件
        img.style.display = ‘none‘  // 将图片隐藏
  	return {‘width‘:img.width,‘height‘:img.height}
 }
 foo().then((val) => {   // async函数内部return语句返回的值，会成为then方法回调函数的参数。所以此处的val就是上面return语句返回的值
 	console.log(val)  // {‘width‘:img.width,‘height‘:img.height}
 })