标签: aspect-ratio

例如,如果我要嵌入YouTube视频

<iframe width="560" src="http://www.youtube.com/embed/25LBTSUEU0A" class="player" frameborder="0" allowfullscreen></iframe>

使用jQuery我会设置一个高度为16:9的高度,所以如果宽度为560,则高度应为315px.
我有这个jquery设置高度,但我不知道如何应用16:9的比例

$('.player').parent().attr('width', ':9ratio');

或者这可以用css整齐地完成吗？

我想了解纵横比.

在这里,我正在设置UIImageView的纵横比.

单击此约束时,这些是选项.

这个约束如何工作以及什么是"PRESETS",反向乘数和转换为十进制.

谢谢.

我有一个尺寸为979X482px的画布元素,我想让它拉伸以适应任何给定浏览器窗口的宽度,保持宽高/高宽1的宽高比为1,我希望高度相对于宽度的比例画布.有关如何使用javascript/jQuery执行此操作的任何建议？

所以经过广泛的研究和大量的jQuery和Javascript解决方案,我根本无法找到一种方法来动态地将图像水平和垂直地缩放到指定的大小,我发现大量的信息有关缩放以适应宽度并保持纵横比,或缩放以适应高度并保持纵横比,但无法确定图像是太高还是太短并相应调整.

所以在我的例子中,我有一个<div>设置宽度为460px,设置高度为280px,我需要图像适合,所有这些都没有拉伸(保持其纵横比)

我有一个 RelativeLayout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="center"
    android:foregroundGravity="center"
    android:gravity="center"
    android:orientation="horizontal" >

    <VideoView
        android:id="@+id/videoViewPanel"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="center" 
        android:layout_centerInParent="true"/>

</RelativeLayout>

我需要的是显示视频全屏裁剪.如果我可以与ImageView进行比较,我需要将其显示为crop_center.

如何让VideoView不自动调整视频大小以适应中心,但裁剪中心？

我是Unity 2D的新手并在其中创建游戏.我想在几乎所有设备(Android,iOS,Mac,Windows和网络)上运行该游戏.我很想知道Unity2D将如何处理这种情况并在各种设备上提供相同的用户体验.

另外我注意到我可以用不同的宽高比预览我的游戏.它是屏幕的宽高比(比如游戏在这种类型的屏幕上的外观)还是相机(在所有屏幕上看起来都一样)？我是否需要根据设备的分辨率提供不同的图像资源？

我应该做些特别的事情来支持不同的分辨率,宽高比等吗？

任何帮助将不胜感激.

我一直在尝试创建一个Unity 2D游戏,支持Android和平板电脑的每个设备的宽高比.有没有办法这样做是由Unity提供或推荐的？

我一直在设计所有我的横向cocos2dx手机游戏,在2508x1584,"始终可见区域"为2112x1408,所以没有黑色边框或缩放,只是一些裁剪,将限于"可能不可见的区域",如如下所示.

在iPhone X和三星Galaxy S8到货之前,这适用于所有移动设备宽高比.这些设备分别具有19.5:9和18:9的宽高比,将"始终可见区域"从1408降低到1158,这足以让我看起来别无选择,只能重新设计我的所有游戏,如下图所示.

因为当我在iPhone X和三星galaxy S8上运行它时,我将所有以前的游戏设计为更高的可见区域,游戏的顶部和底部显然被切断了.

我是否坚持重新设计这些游戏以使它们适合这种较短的宽高比？还是我在这里忽略了另一种解决方案？

我玩视频从URL上Exoplayer,它伸展在调整视频/使用resize_mode,因为我已经在布局文件中使用此提到的我不能够保持视频的纵横比.

我想像CENTER_CROP我们TextureSurface在image2中提到的那样进行缩放类型,但我得到输出为image1

我试过以下例子

Exoplayer演示示例

我的输出(图1)和预期输出(图2)

exoplayer布局代码

  <com.google.android.exoplayer2.ui.SimpleExoPlayerView
      android:id="@+id/player_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:resize_mode="fill" />

使用这条线,app:resize_mode="fill"它可以在屏幕上显示视频但是垂直拉伸,那么我该如何解决这个问题.

在下面的示例中，圆圈适应网格宽度并保持其纵横比。随着容器宽度的缩小，圆圈也随之缩小……

然而，当高度小于宽度时（第二个框），圆圈不会缩小重叠在网格外，而是有没有办法让它在保持纵横比的同时也适应高度？

.container {
	display: grid;
	background-color: greenyellow;
	margin: 5px;
	min-height: 10px;
	min-width: 10px;
}

.portrait {
		max-height: 100px;
		max-width: 200px;
}

.landscape {
		max-height: 200px;
		max-width: 100px;
}

.aspect-ratio {
	grid-column: 1;
	grid-row: 1;
	background-color: deeppink;
	border-radius: 50%;
 align-self: center;
	justify-self: center;
}

<div class="container landscape">
  <svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>

<div class="container portrait">
  <svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>

结果应如下所示：