标签: aspect-ratio

我在全屏模式下遇到了一些问题。我可以将窗口设置为 800x600，但是当我全屏显示该分辨率时，它会拉伸。我认为这是因为纵横比的变化。我怎样才能解决这个问题？

编辑 #1

这是我所看到的情况的屏幕截图。

左：800x600

右：1366x768

编辑 #2

每次我重新调整窗口大小 (WM_SIZE) 时都会调用我的 initGraphics 函数。

void initGraphics(int width, int height) {
    float aspect = (float)width / (float)height;
    glViewport(0, 0, width, height);
    glEnable(GL_TEXTURE_2D);
    glEnable(GL_BLEND); //Enable alpha blending
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
    glClearColor(0.0, 0.0, 0.0, 1.0);
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    gluOrtho2D(0.0, width, height * aspect, 0.0);
    glMatrixMode(GL_MODELVIEW);
}

在我的网站上,我有一个静态宽度嵌入式无边框YouTube播放器(iframe),用于播放用户选择的视频.它运作良好,但有一点烦恼:它的高度不响应视频; 电影超宽屏视频有水平黑条,旧式4:3视频有垂直黑条.

是否有一个相当简单的解决方案,可以让玩家根据正在播放的视频调整其高度？所有谷歌都揭示了流体布局网站的脚本(我的不是).Javascript,Coffeescript和Jquery解决方案都是可以接受的.

我试图调整图像的尺寸,同时保持它的纵横比.这似乎是一个非常简单的任务,但我找不到任何地方的相关答案..(与JavaScript的Image()对象有关).我可能错过了一些非常明显的东西.以下是我想要实现的目标:

var img = new window.Image();
img.src = imageDataUrl;
img.onload = function(){
    if (img.width > 200){
        img.width = 200;
        img.height = (img.height*img.width)/img.width;
    }
    if (img.height > 200){
        img.height = 200;
        img.width = (img.width*img.height)/img.height;
    }
};

这是按比例调整图像大小,然后像这样绘制到画布上:.context.drawImage(img,0,0,canvas.width,canvas.height);但是看起来我不能直接改变Image()尺寸,那么它是如何完成的呢？谢谢.

编辑:我没有使用交叉乘法正确解决图像比例.@markE提供了一种获得正确比率的简洁方法.以下是我的新(工作)实现:

var scale = Math.min((200/img.width),(200/img.height));
img.width = img.width*scale;
img.height = img.height*scale;
clearCanvas(); //clear canvas
context.drawImage(img,0,0,img.width,img.height);

我想要一个不在立方体中的 3d 图，因为我的 z 数据比 x 和 y 轴的比例小 10 倍。你如何设置它以便 3d 绘图不是在立方体中，而是在矩形中？（我希望 x、y、z 轴也处于相同的比例。也就是说，x 和 y 是从 0 到 100，而在这个例子中，z 是从 0 到 10：）

zz = matrix(c(1:10), nrow = 100, ncol = 100)

plot_ly(z=zz, x = c(1:100), y = c(1:100), type = 'surface') %>% 
  layout(autorange = F, aspectmode = 'manual', 
         scene = list(xaxis = list(range = c(0,100)),
                      yaxis = list(range = c(0,100)),
                      zaxis = list(range = c(0,20))
         ))

如果我将 zaxis 的范围设置为 (1:20)，那么比例会混乱并且表面仍然处于立方空间中，这是我不想要的。

我对理解图像大小所使用的不同术语感到非常困惑。有什么区别：

1. 裁剪图像
2. 调整图像大小
3. 缩放图像
4. 更改图像的长宽比

特别是调整大小与缩放！

在评论出来之前，这个问题已经被问过好几次了，这里有一个重要的方面。

我不希望视频元素保持播放视频的宽高比。我希望视频元素的纵横比始终为 19:6，即使播放的视频的纵横比为 21:9 或 4:3。

我尝试过：
HTML：

<main>
    <div class="main-container">
        <div class="video-container">
            <video class="video" controls="" src="..." poster="..."></video>
        </div>
    </div>
</main>

CSS：

main {
    margin: 0;
    padding: 0;
    width: 100%;
    height: calc(100% - 76px - 55px);
    background: black;
}

main .main-container {
    margin: 0 10%;
    padding: 0;
    width: 80%;
    height: 100%;
    background: black;
    display: float-root;
}

main .main-container:after {
    clear: both;
}

main .main-container .video-container {
    margin: 0;
    padding: 0;
    width: 75%;
    height: 100%;
    float: left;
    display: inline-block;
}

main …

在编辑器中，我的游戏运行良好，但在 Android 设备中，我游戏中的所有图像都会因分辨率而扭曲。

在一些答案中，使用图像组件中的保留方面，但我认为精灵渲染器和图像不能同时使用

我怎么解决这个问题？

我在 SwiftUI 中剪辑图像时遇到问题

这是错误工作示例最少的代码：

struct TestView: View {
    var body: some View {
        Image("iPhone13Pro")
            .resizable()
            .scaledToFill()
            .frame(width: 400, height: 400)
            .border(.black)
            .clipped()
            .onTapGesture {
                print("click")
            }
    }
}

正如我所料，框架外的点击不应在控制台上打印任何内容，但它会打印

结果，图像没有被剪切，我click在控制台中看到

结果似乎渲染正确，但图像外部的触摸（红色箭头）仍然产生控制台日志

图像不是方形的，而是水平的，所以，如果没有.clipped()它，看起来像这样：

我有一个只有一个孩子的wx.Frame.在设置子项的wx.Sizer时,我可以使用wx.SHAPED标志,该标志可以保持子项的宽高比.但是,Frame的纵横比仍然具有完全的自由度,并且会在孩子未使用的区域留下空白区域.

如何在调整大小期间锁定wx.Frame的宽高比？

我有一个div,我想设置为其父容器宽度的90%,我希望设置它的高度,以达到特定的宽高比,比如说3:1.

.mydiv {
  width: 90%
  height: 30%(of-width);
}

有没有办法做到这一点,不涉及JavaScript？