标签: aspect-ratio
使用CSS保持div的宽高比
我想创建一个div可以随着窗口宽度的变化而改变宽度/高度的东西.
是否有任何CSS3规则允许高度根据宽度改变,同时保持其宽高比？
我知道我可以通过JavaScript实现这一点,但我更喜欢只使用CSS.
推荐指数
解决办法
查看次数
CSS强制图像调整大小并保持纵横比
我正在使用图像,我遇到了纵横比问题.
<img src="big_image.jpg" width="900" height="600" alt="" />
正如你所看到的,height并width已经指定.我为图片添加了CSS规则:
img {
max-width:500px;
}
但是big_image.jpg,我收到width=500和height=600.我如何设置图像以重新调整大小,同时保持其纵横比.
推荐指数
解决办法
查看次数
如何设计div作为响应方块？
我希望我的div能够调整其高度以始终等于其宽度.宽度是百分比.当父级的宽度减小时,框应该通过保持其宽高比来减少.
怎么做是CSS？
推荐指数
解决办法
查看次数
响应方块网格
我想知道如何创建一个响应方块的布局.每个正方形都有垂直和水平对齐的内容.具体示例如下所示......
推荐指数
解决办法
查看次数
通过保持宽高比和宽度来调整UIImage的大小
我在许多文章中看到通过保持纵横比来调整图像大小.这些函数在调整大小时使用RECT的固定点(宽度和高度).但是在我的项目中,我需要仅根据宽度调整视图大小,应根据宽高比自动获取高度.有人帮助我实现这一目标.
推荐指数
解决办法
查看次数
Android Camera Preview Stretched
我一直在努力在Android上制作自定义相机活动,但是当旋转相机时,表面视图的纵横比会变得混乱.
在我的oncreate活动中,我设置了framelayout,它保存了显示摄像机参数的表面视图.
//FrameLayout that will hold the camera preview
FrameLayout previewHolder = (FrameLayout) findViewById(R.id.camerapreview);
//Setting camera's preview size to the best preview size
Size optimalSize = null;
camera = getCameraInstance();
double aspectRatio = 0;
if(camera != null){
//Setting the camera's aspect ratio
Camera.Parameters parameters = camera.getParameters();
List<Size> sizes = parameters.getSupportedPreviewSizes();
optimalSize = CameraPreview.getOptimalPreviewSize(sizes, getResources().getDisplayMetrics().widthPixels, getResources().getDisplayMetrics().heightPixels);
aspectRatio = (float)optimalSize.width/optimalSize.height;
}
if(optimalSize!= null){
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, (int)(getResources().getDisplayMetrics().widthPixels*aspectRatio));
previewHolder.setLayoutParams(params);
LayoutParams surfaceParams = new LayoutParams(LayoutParams.MATCH_PARENT, (int)(getResources().getDisplayMetrics().widthPixels*aspectRatio));
cameraPreview.setLayoutParams(surfaceParams);
}
cameraPreview.setCamera(camera);
//Adding the preview …推荐指数
解决办法
查看次数
保持div的宽高比但在CSS中填充屏幕宽度和高度？
我有一个网站,它有一个固定的长宽比近似16:9景观,像一个视频.
我想让它居中并扩展以填充可用的宽度和可用的高度,但不要在任何一侧变大.
例如:
- 高而薄的页面将使内容伸展整个宽度,同时保持比例高度.
- 较短的宽页面将使内容延伸到整个高度,具有成比例的宽度.
我一直在研究两种方法:
- 使用具有正确宽高比的图像来扩展容器
div,但我无法让它在主要浏览器中以相同的方式运行. - 设置比例底部填充,但仅相对于宽度工作并忽略高度.它随着宽度不断变大,并显示垂直滚动条.
我知道你可以很容易地用JS做到这一点,但我想要一个纯CSS解决方案.
有任何想法吗？
推荐指数
解决办法
查看次数
所有基于Android的手机和平板电脑都有屏幕分辨率列表吗？
如果没有,是否有最流行的Android手机和平板电脑的屏幕分辨率列表.
推荐指数
解决办法
查看次数
如何缩放SVG图像以填充浏览器窗口？
这似乎应该很容易,但我只是没有得到什么.
我想创建一个包含单个SVG图像的HTML页面,该图像会自动缩放以适应浏览器窗口,无需任何滚动,同时保留其纵横比.
例如,目前我有一个1024x768的SVG图像; 如果浏览器视口是1980x1000,那么我希望图像显示为1333x1000(垂直填充,水平居中).如果浏览器是800x1000,那么我希望它以800x600显示(水平填充,垂直居中).
目前我的定义如下:
<body style="height: 100%">
<div id="content" style="width: 100%; height: 100%">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="100%" height="100%"
viewBox="0 0 1024 768"
preserveAspectRatio="xMidYMid meet">
...
</svg>
</div>
</body>
然而,这是扩展到浏览器的整个宽度(对于宽而短的窗口)并产生垂直滚动,这不是我想要的.
我错过了什么？
推荐指数
解决办法
查看次数
如何在libGDX中处理不同的宽高比？
我已经使用libGDX实现了一些屏幕,这显然会使用ScreenlibGDX框架提供的类.但是,这些屏幕的实现仅适用于预定义的屏幕尺寸.例如,如果精灵用于640 x 480大小的屏幕(4:3宽高比),它将无法按预期在其他屏幕尺寸上工作,因为精灵与屏幕边界相同并且不会缩放到屏幕尺寸一点都不 此外,如果libGDX提供了简单的缩放,我面临的问题仍然存在,因为这会导致游戏画面的宽高比发生变化.
在对互联网进行研究之后,我遇到了一个讨论同一问题的博客/论坛.我已经实现了它,到目前为止它工作正常.但我想确认这是否是实现这一目标的最佳选择,还是有更好的选择.下面是代码,以显示我如何处理这个合法的问题.
论坛链接:http://www.java-gaming.org/index.php？ topic = 25685.new
public class SplashScreen implements Screen {
// Aspect Ratio maintenance
private static final int VIRTUAL_WIDTH = 640;
private static final int VIRTUAL_HEIGHT = 480;
private static final float ASPECT_RATIO = (float) VIRTUAL_WIDTH / (float) VIRTUAL_HEIGHT;
private Camera camera;
private Rectangle viewport;
// ------end------
MainGame TempMainGame;
public Texture splashScreen;
public TextureRegion splashScreenRegion;
public SpriteBatch splashScreenSprite;
public SplashScreen(MainGame maingame) {
TempMainGame = maingame;
}
@Override
public …推荐指数
解决办法
查看次数
标签 统计
aspect-ratio ×10
css ×5
android ×3
html ×3
css3 ×2
layout ×2
fixed-width ×1
grid-layout ×1
image ×1
ios ×1
iphone ×1
libgdx ×1
objective-c ×1
opengl-es ×1
preview ×1
scaling ×1
surfaceview ×1
svg ×1
xhtml ×1