发布网友
发布时间:2022-04-23 14:06
共8个回答
懂视网
时间:2022-04-28 17:15
目标:
遇到一个需求,让图片在页面中,不管宽度如何变化。宽高保持16:9的比例。
实现:
方法一:这也是比较经典的一个方法,利用padding-bottom来实现。
<!DOCTYPE html> <html> <head> <title>固定宽高比16:9</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .wrap{ width:100%; } /* 16:9宽高比,则设padding-bottom:56.25% */ /* height: 0px,防止矩形被里面的内容撑出多余的高度*/ .box{ width: 100vw; height: 0px; position: relative; padding-bottom: 56.25%; background: pink; } /* 如果需要在div里面设置内容*/ /* 需要设置position:absolute,才能设置内容高度100%和矩形一样 */ /*.box p{ width: 100%; height: 100%; position: absolute; }*/ </style> </head> <body> <div class="wrap"> <div class="box"> <p>这是一个16:9的矩形</p> </div> </div> </body> </html>
方法二:利用vmin来实现。
<!DOCTYPE html> <html> <head> <title>固定宽高比16:9</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .wrap{ width:100%; } /*vmin:相对于可视窗口的宽度或高度中较小的那个,被均分为100单位的vmin*/ /*例:当宽度是300,高度是600,那么50vmin则是相对于宽度的50%*/ .box{ height: 56.25vmin; background: pink; } </style> </head> <body> <div class="wrap"> <div class="box"> <p>这是一个16:9的矩形</p> </div> </div> </body> </html>
注意:如果屏幕宽度较大高度较小时,则可以用vmax。如果需要随意切换时,可以通过js来控制。
总结:
两种方法各有利弊,方法一:兼容性好,代码相对长点,理解也比较困难点。方法二:代码简洁,理清定义后便非常容易理解,但是兼容性相对差一些。不过兼容性啥的,怕什么哈哈哈。
热心网友
时间:2022-04-28 14:23
工具/原料
电脑 PS软件
方法/步骤
1、打开ps,按下Ctrl+O键,在弹出的对话框内选择图片。
2、点击左侧工具箱“矩形选框工具”。
3、上方“样式”后边下拉点击“固定比例”选项。
4、在右侧,输入框输入高为16,宽为9,即可。
热心网友
时间:2022-04-28 15:41
1、演示使用的软件为图像处理软件photoshop,软件版本为Adobe photoshop CC2017。
2、首先打开PS图像处理软件,然后在该软件中加载想要修改比例的图片。
3、首先选择左侧工具栏中的矩形选框工具。
4、然后调整矩形选框工具的样式为固定比例,并在宽度和高度上分别填写16和9,表示固定宽高比为16:9。
5、然后我们使用鼠标在图层上进行绘制16:9比例的选区,绘制完成后我们就得到了一个标准的16:9选区。
将背景图层进行复制,然后粘贴入该选区,即可将一张图片调整成16:9的比例。
热心网友
时间:2022-04-28 17:16
热心网友
时间:2022-04-28 19:07
热心网友
时间:2022-04-28 21:15
热心网友
时间:2022-04-28 23:40
图像,图像大小!长和宽就可以调整了!不要选择约束比例哈,不过这样的话是会拉伸的!有帮助的话,请采纳
热心网友
时间:2022-04-29 02:21