标签: aspect-ratio
如何将显示的图像"智能调整"为原始宽高比
我有一个应用程序,最终用户可以在设计器中调整大小和位置图像.由于规范要求将图像"拉伸"到包含控件,因此最终用户可能最终得到一个难以拉伸的图像.
为了帮助用户进行图像大小调整,我正在考虑实现智能缩放器功能,该功能允许用户轻松修复图片的宽高比,使其不再显得拉伸.
解决这个问题的快速方法是实际提供两个选项:1)从宽度2开始缩放从高度开始缩放.用户选择该方法,并且算法通过使用原始宽高比来调整图片的大小.例如:图片在设计器上显示为200x200,但原始图像为1024x768像素.用户选择"宽度智能尺寸",新尺寸变为~200x150,因为原始宽高比为~1.333
没关系,但是我怎么能通过询问重新计算应该基于哪个维度来使算法变得更聪明而不打扰用户呢？
推荐指数
解决办法
查看次数
调整图像大小和保持宽高比以适合iPhone的算法
我正在为iPhone应用程序创建一个Web服务来进行交互.
当我的客户端上传服务器端的图像时,我希望我的php脚本调整图像大小,同时保持纵横比,以便它适合iPhone屏幕.(即最长边<= 960,最短<= 640
我在JS中创建了一个模型,只是因为我发现它更容易快速完成.
我很确定,虽然我可能错了,但这不是最有效的方法.有人可以用更好的逻辑(尤其是开头的那个)或更接近这个的数学方法来纠正我吗？
var w = 960, h = 960, new_w, new_h;
if (w >= h && w > 960 || h >= w && h > 960 || w >= h && h > 640 || h >= w && w > 640) {
if (w > h) {
if (w>960) {
new_w = 960;
new_h = h*(new_w/w);
}
if (h>640) {
new_h = 640;
new_w = w*(new_h/h);
}
}
else {
if (h>960) …推荐指数
解决办法
查看次数
Corona SDK跨设备屏幕分辨率
这将是寻找可能不存在的答案的尴尬问题之一,但是这里有.
我一直在使用Corona开发一些简单的游戏,虽然功能似乎在我测试的大多数物理设备上运行良好,但主要问题是布局.我知道你不能完美地为每一台设备构建,但我想知道是否有一种常见的方法可以使应用程序在尽可能多的屏幕上看起来很好.我可以访问这些设备
- iPad 1和2:4:3(1.33)
- iPhone 960×640 3:2(1.5)
- iPhone 480x320 3:2(1.5)
- Galaxy Nexus 16:9(1.77)
从我所看到的,人们的目标是使用320x480作为缩放分辨率,然后让Corona升级到正确的设备分辨率(根据需要使用任何@ 2x图像)但这会导致信箱或裁剪,具体取决于config.lua比例设置.虽然它确实可以正确缩放,但有一个信箱并不是很好.
那么我最好不要在配置文件中指定宽度和高度,而是先使用某种屏幕检查来查找1.33/1.5/1.77的宽高比？当然,就Corona SDK的全部意义而言,开发人员可以使用某种"典型"设置来开始任何新项目？
谢谢
推荐指数
解决办法
查看次数
FFmpeg - 使用宽高比更改视频的分辨率
所有.
如何用FFmpeg改变宽高比视频的分辨率？
有选项 http://manpages.ubuntu.com/manpages/oneiric/man1/ffmpeg.1.html
-s size
Set frame size. The format is wxh (ffserver default = 160x128,
ffmpeg default = same as source). The following abbreviations are
recognized:
和
-aspect aspect
Set the video display aspect ratio specified by aspect.
aspect can be a floating point number string, or a string of the
form num:den, where num and den are the numerator and denominator
of the aspect ratio. For example "4:3", "16:9", "1.3333", and
"1.7777" are valid argument values.
例如,我有两个输入视频: …
推荐指数
解决办法
查看次数
基于高度的CSS方块
是否可以div根据高度(以像素为单位)制作带css 的正方形？
这个问题是相似到这一个(标记为一式两份),但在这种情况下,我想的高度,以像素或任何单位进行设定.
基于宽度,有一个简单的解决方案:
.mydiv {
height: 0;
padding-bottom: 100%;
}
但这里'高度跟随宽度'.我正在寻找'宽度跟随高度'的解决方案.因此,如果我将高度设置为300px,宽度将遵循它.
现在我正在使用javascript,更新窗口调整大小.但我想找到一个CSS解决方案,这就是为什么我不寻找一个JavaScript解决方案
这是一个游乐场
推荐指数
解决办法
查看次数
修复Android相机应用宽高比和旋转
看起来如何:http: //i41.tinypic.com/30278m1.png
它看起来像在pic中,我希望它具有正确的长宽比和正确的旋转
请看一下代码,我该如何解决？
这是我的代码:
public class MainActivity extends Activity implements SurfaceHolder.Callback {
Camera mCamera;
SurfaceView mPreview;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mPreview = (SurfaceView)findViewById(R.id.preview);
mPreview.getHolder().addCallback(this);
mPreview.getHolder().setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);
mCamera = Camera.open();
}
@Override
public void onPause() {
super.onPause();
mCamera.stopPreview();
}
@Override
public void onDestroy() {
super.onDestroy();
mCamera.release();
}
@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
Camera.Parameters params = mCamera.getParameters();
List<Camera.Size> sizes = params.getSupportedPreviewSizes();
Camera.Size selected = sizes.get(0);
params.setPreviewSize(selected.width,selected.height);
mCamera.setParameters(params);
mCamera.startPreview();
} …推荐指数
解决办法
查看次数
根据高度设置宽度
我根据宽度看到高度的解决方案:css高度与宽度相同.或者在这里:https://stackoverflow.com/a/6615994/2256981.但我的问题恰恰相反.
我的元素:
<body>
<div id="square"></div>
</body>
风格:
body, html {
margin: 0;
height: 100%;
min-height: 300px;
position: relative;
}
div#square { /* My square. */
height: 75%; /* It's height depends on ancestor's height. */
width: 75vh; /* If supported, preliminarily sets it's width. */
position: absolute; /* Centers it. */
left: 50%; top: 50%; transform: translate(-50%, -50%);
background-color: darkorange; /* Makes it visible. */
}
脚本,保持正方形:
window.onload = window.onresize = function (event) { …推荐指数
解决办法
查看次数
在iOS中解释纵横比和各自的术语？
我想了解纵横比.
在这里,我正在设置UIImageView的纵横比.
单击此约束时,这些是选项.
这个约束如何工作以及什么是"PRESETS",反向乘数和转换为十进制.
谢谢.
推荐指数
解决办法
查看次数
CSS:保持宽高比而不会溢出内容
我正在使用CSS,我想创建一个具有一定比率的盒子,无论盒子的大小如何都要保留.但是如果有更多内容,我希望盒子能够增长.
按顺序总结:
- 仅限CSS (如果可能)
- 保留给定的宽高比
- 如果有更多内容(比率)允许框增长
在那些我迄今为止尝试过的技术中,盒子的内容无法使盒子增长.相反,我唯一的选择是重叠或剪裁内容.
第一种和第三种方法占据了包装器内部的空间,并且使用绝对位置将内容置于其上方.由于内容是绝对定位的,因此将其从文档流中删除.因此,它无法扩展包裹元素.
第二种选择是使用固定高度,这也不允许内容超出它.
* {margin: 0; padding: 0;}
div{
width: 50vmin; height: 50vmin;
font-size: 30px;
background: #ccc;
margin: auto;
padding: 3%;
}<div>
<p>If you scale your window, you will see that the text does not fit into the box at some point, and therefore the text will be overlapping the box.<p>
</div>我部分测试的其他方法:
- 物体定位
- Flexbox的
据我所知,Object-Fit仅影响被替换的元素.我无法通过此属性对我的div/p元素产生任何影响.
Flexbox对我的场景也不实用.根据我目前的知识水平,flexbox在这方面没有帮助.因为它主要是关于建立多个项目之间的关系.但我不确定.也许flexbox中有一些我还没有意识到的东西.
推荐指数
解决办法
查看次数
即使内容的大小不同,也请使用flexbox并保持1:1的宽高比
关于维护元素的宽高比(使用flexbox或不使用),有很多问题.但是,我的问题略有不同,因为我想覆盖子图像元素的宽高比:
- 确保图像
object-fit: cover完全覆盖元素() - 确保元素为1:1(即完美的圆圈)
- 确保隐藏溢出的图像
换句话说,图像必须表现得好像它是一个元素的背景(我不能用它们作为背景图像),其纵横比总是1:1 并且响应.
在下面的例子中,一切正常,除了<a>元素适应他们的图像后代.但我希望他们保持1:1的比例,这样我就能得到完美的圆圈.(不过,第一行的中间一行必须大于其余部分.)
HTML无法更改,但我可以使用现代CSS属性,如object-fit和flexbox.(只要最新版本的Chrome/Firefox支持它.)
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.img-gallery {
background: #fafafa;
padding: 24px;
min-width: 320px;
width: 90%;
margin: 0 auto;
}
.img-gallery .row {
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
}
.img-gallery a {
display: block;
text-decoration: none;
background-image: linear-gradient(60deg, #004494 0%, #7db9e8 78%, #c2dfed 100%);
overflow: hidden;
border-radius: 50%;
padding: 3px;
flex: 1;
margin: 0 24px;
transition: padding 200ms; …推荐指数
解决办法
查看次数
标签 统计
aspect-ratio ×10
css ×4
algorithm ×2
image ×2
android ×1
autolayout ×1
coronasdk ×1
css3 ×1
ffmpeg ×1
flexbox ×1
html ×1
ios ×1
mobile ×1
php ×1
resize ×1
resolution ×1
surfaceview ×1
video ×1