Questions tagged «aspect-ratio»

元素的长宽比描述了元素的宽度和高度之间的比例关系。

25
使用CSS保持div的长宽比
我想创建一个div可以随窗口宽度变化而改变其宽度/高度的。 是否有任何CSS3规则可以允许高度根据宽度而改变，同时保持其长宽比？ 我知道我可以通过JavaScript来做到这一点，但我宁愿只使用CSS。
21
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。如何设置图像以调整尺寸，同时保持其纵横比。
577 css  image  aspect-ratio 
4
响应方块网格
Наэтотвопросестьответына 堆栈溢出нарусском：Сеткаизадаптивных（响应）квадратов 我想知道如何创建具有响应正方形的布局。每个正方形将具有垂直和水平对齐的内容。具体示例显示在下面...
11
扩展了Android相机预览
我一直在尝试在Android上进行自定义摄像头活动，但是在旋转摄像头时，表面视图的纵横比会变得混乱。 在活动的oncreate中，我设置了框架布局，该框架布局保留了显示相机参数的表面视图。 //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(); …
9
保持div的长宽比，但在CSS中填充屏幕的宽度和高度？
我有一个可以放在一起的网站，其纵横比大约为 16:9等于风景，例如视频。 我想将其居中并扩展以填充可用的宽度和可用的高度，但不要在任何一侧变大。 例如： 高而薄的页面将使内容伸展整个宽度，同时保持成比例的高度。 短而宽的页面将使内容延伸到整个高度，并具有成比例的宽度。 我一直在研究两种方法： 使用具有正确长宽比的图像来扩展容器div，但是我无法在主要浏览器中以相同的方式显示图像。 设置成比例的底部填充，但这仅相对于宽度有效，而忽略高度。它的宽度不断增大，并显示垂直滚动条。 我知道您可以使用JS轻松完成此操作，但是我想要一个纯CSS解决方案。 有任何想法吗？
1
如何缩放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> 但是，这会放大到浏览器的整个宽度（对于宽而短的窗口）并产生垂直滚动，这不是我想要的。 我想念什么？
7
matplotlib（相等单位长度）：纵横比“相等”时，z轴不等于x-和y-
当我为3d图形设置相等的长宽比时，z轴不会更改为“相等”。所以这： fig = pylab.figure() mesFig = fig.gca(projection='3d', adjustable='box') mesFig.axis('equal') mesFig.plot(xC, yC, zC, 'r.') mesFig.plot(xO, yO, zO, 'b.') pyplot.show() 给我以下内容： 显然，z轴的单位长度不等于x和y单位。 如何使三个轴的单位长度相等？我能找到的所有解决方案都行不通。谢谢。
7
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; …
3
ConstraintLayout纵横比
考虑以下布局文件： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.constraint.ConstraintLayout android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FF0000" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin"> <ImageView android:layout_width="0dp" android:layout_height="0dp" android:background="#0000FF" android:padding="16dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintDimensionRatio="H,3:1" tools:layout_editor_absoluteX="16dp" /> </android.support.constraint.ConstraintLayout> </RelativeLayout> 我不确定app：layout_constraintDimensionRatio的工作方式。我的理解是比率将始终是宽度：高度。因此3：1将始终使ImageView出现的宽度是高度的3倍。前缀H或W告诉ConstraintLayout哪个尺寸应遵守该比率。如果为H，则意味着将首先根据其他约束条件计算宽度，然后根据宽高比调整高度。但这是布局的结果： 高度是宽度的3倍，这是意外的。谁能向我解释如何针对app：layout_constraintDimensionRatio设置计算尺寸？
4
Flexbox布局中的填充底部/顶部
我有一个Flexbox布局，其中包含两个项目。其中之一使用padding-bottom： 显示代码段 #flexBox { border: 1px solid red; width: 50%; margin: 0 auto; padding: 1em; display: flex; flex-direction: column; } #text { border: 1px solid green; padding: .5em; } #padding { margin: 1em 0; border: 1px solid blue; padding-bottom: 56.25%; /* intrinsic aspect ratio */ height: 0; } <div id='flexBox'> …
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.