标签: aspect-ratio

我允许用户调整图像大小，同时尝试保持图像的原始纵横比。

对于每个调整大小操作，我都有一个“偏移”变量，它指示宽度和高度的变化。这是基于鼠标移动的，因此它可以是任意值的组合，具体取决于调整大小时移动鼠标的程度。

我现在正在做的是取两个值（x 和 y 变化）中较大的一个，并使用它来计算相同纵横比的另一个值。这是我的代码：

if (Math.Abs(offset.X) > Math.Abs(offset.Y))
{
    offset.Y = (int)(offset.X / AspectRatio);
}
else
{
    offset.X = (int)(offset.Y * AspectRatio);
}

长宽比是标准宽度/高度值。

我的代码的问题在于它使用整数值，因此它会四舍五入并导致纵横比扭曲。

我假设我需要做的是捕捉到可被纵横比整除的整数值，或者为此目的。但我不知道如何通过修改这些 x 和 y“偏移”值来做到这一点。

我想创建一个 div 来保持纵横比与父级的高度和宽度变化。

在上面的 gif 中，您可以看到我能够在更改宽度时保持框 div 的纵横比，但在更改父级的高度时无法保持它。

.box {
  width: 100px;
  background-color: #dfdfdf;
  max-width: 100%;
}
.box:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  padding-bottom: 160%;
}
.wrap9 {
  width: 125px;
  height: 190px;
}

<div class="wrap9">
  <div class="box"></div>
</div>

我希望灰色框的行为如下：

以下代码片段说明了我的问题：

<style>
div {
  background-color: #00FF00;
  width: 80px;
}
svg {
  background-color: #FF0000;
  vertical-align: top;
  width: 100%;
  height: auto; // PROBLEM
}
rect { fill: #0000FF; }
</style>
<div>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
    shape-rendering="geometricPrecision"
    text-rendering="geometricPrecision"
    image-rendering="optimizeQuality"
    fill-rule="evenodd"
    clip-rule="evenodd"
    preserveAspectRatio="xMidYMid meet"
    width="100"
    height="100"
    >
    <rect width="90" height="90" x="5" y="5" />
  </svg>
</div>

SVG 应该是一个红色方块（其中绘制了一个蓝色方块），它相对于其父 div 标签按比例缩小，同时保留其纵横比。上面的示例在 Firefox、Chrome（适用于桌面版和 Android）、Safari 和 Edge 中运行良好。它渲染一个 80x80px 的红色正方形：

只有Internet Explorer 10 和 11 会将 SVG 垂直拉伸到其预期高度的两倍左右，即 80x160px：

如果我删除/注释样式表中的“height: auto”语句，SVG 将缩放为 80x100px。然而，这会破坏 Chrome，在这种情况下，它还会将 …

我有一堆 PNG 图像文件。我正在尝试使用 ffmpeg 制作幻灯片。图片尺寸为3000*4000。这些图像的长宽比并不完全相同。

有些是这样的：

有些是这样的：

我使用了命令：

ffmpeg -loop 1 -framerate 1/10 -i img%3d.png -i audio.wav -vf scale=w=3840:h=-1 -vcodec libx264 -crf 14 -r 60 -pix_fmt yuv420p -shortest output.mp4

它返回给我这个：

   ffmpeg version 3.3.2 Copyright (c) 2000-2017 the FFmpeg developers
  built with gcc 6.3.0 (Debian 6.3.0-18) 20170516
  configuration: --disable-decoder=amrnb --disable-decoder=libopenjpeg --disable-mips32r2 --disable-mips32r6 --disable-mips64r6 --disable-mipsdsp --disable-mipsdspr2 --disable-mipsfpu --disable-msa --disable-libopencv --disable-podpages --disable-stripping --enable-avfilter --enable-avresample --enable-gcrypt --enable-gnutls --enable-gpl --enable-libass --enable-libbluray --enable-libbs2b --enable-libcaca --enable-libcdio --enable-libfdk-aac --enable-libfontconfig --enable-libfreetype --enable-libfribidi --enable-libgme --enable-libgsm --enable-libilbc --enable-libkvazaar --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb …

通过在 rmarkdown ioslides 演示文稿中使用knitr::include_graphicswith 选项out.height='50px'，纵横比不会保留在我的机器上。有谁知道如何解决这个问题？

有趣的是，今天早上它起作用了。但不是在我安装了 R 包之后ggsn, ggmap, plotKML。后来我删除了它们，但问题仍然存在。

我使用：Ubuntu 16.04.4，R 版本 3.4.4，当前 rmarkdown

最小的例子是：

---
title: "Untitled"
author: "Me"
date: "May 24, 2018"
output: ioslides_presentation
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo =T)
```

## R Markdown
setting out.height does NOT keep aspect ratio
```{r, out.height='50px', dpi=200}
   knitr::include_graphics("rect_circ.png")
```

setting out.width keeps aspect ratio
```{r, out.width='50px', dpi=200}
knitr::include_graphics("rect_circ.png")
```

我一直在尝试做一些看起来很简单的事情，但我已经尝试了几个小时，但找不到解决方案。

我有一个需要位于屏幕顶部的 SVG。它来自具有以下尺寸的设计师：

<Svg width="354px" height="190px" viewBox="0 0 354 190">...</Svg>

在React Native 中，这将进入容器内部，SVG 需要占据屏幕的整个宽度，我从中获取：

Dimensions.get("window").width

我的问题是，我还没有找到一种方法来缩放 SVG 以占据屏幕宽度的 100%，找出正确的高度（或自动设置它的方法），并保留纵横比。我已经尝试了一百万次，包括使用容器的aspectRatio样式及其高度（或根本不设置高度）。每当我发现一些有效的“比例”时，我都会尝试使用不同屏幕宽度的不同设备，但它看起来一点也不好看（裁剪过，小于屏幕宽度等）。

我觉得SVG (react-native-svg) 中的preserveAspectRatio属性在某种程度上与aspectRatio风格相冲突。我完全迷失了preserveAspectRatio，我还没有找到一种方法来使它缩放而不被裁剪。

有谁知道如何实现这一目标？

这是我的最终代码，它返回一个显示 SVG 的 HeatMap 组件，但尽管它具有正确的高度，但 SVG 的一部分从右侧超出了屏幕（看起来被裁剪，因为它太宽了）：

const windowWidth = Dimensions.get("window").width;

const getSVGRootProps = ({ width, height }) => ({
  width: "100%",
  height: "100%",
  viewBox: `0 0 ${width} ${height}`,
  preserveAspectRatio: "xMinYMin meet",
});

const FieldShape = () => {
  const width = 354; …

我正在尝试解决问题但没有成功，希望有人能提供帮助。

我寻找过类似的帖子，但找不到任何可以解决我的问题的内容。

我的场景如下：我有一个 ，上面可以放置UIView许多其他s 。UIView这些可以使用手势识别器移动、缩放和旋转（这里没有问题）。用户能够更改主视图（画布）的长宽比，我的问题是尝试缩放画布的内容以适应新的目标尺寸。

有许多具有类似主题的帖子，例如：

计算 CGRect 上的新大小和位置

如何从 UIView 创建特定尺寸的图像

但这些并没有解决比率的多次变化。

我的方法：

当我更改画布的纵横比时，我使用AVFoundation计算画布的子视图应适合的纵横比适合的矩形：

let sourceRectangleSize = canvas.frame.size

canvas.setAspect(aspect, screenSize: editorLayoutGuide.layoutFrame.size)
view.layoutIfNeeded()

let destinationRectangleSize = canvas.frame.size

let aspectFittedFrame = AVMakeRect(aspectRatio:sourceRectangleSize, insideRect: CGRect(origin: .zero, size: destinationRectangleSize))
ratioVisualizer.frame = aspectFittedFrame

红框只是为了可视化纵横比拟合矩形。正如您所看到的，虽然长宽比适合的矩形是正确的，但对象的缩放不起作用。当我将缩放和旋转应用于子视图（CanvasElement）时尤其如此。

我缩放对象的逻辑显然是错误的：

@objc
private func setRatio(_ control: UISegmentedControl) {
  guard let aspect = Aspect(rawValue: control.selectedSegmentIndex) else { return }
  
  let sourceRectangleSize = canvas.frame.size
 
  canvas.setAspect(aspect, screenSize: editorLayoutGuide.layoutFrame.size)
  view.layoutIfNeeded()
 
  let destinationRectangleSize = canvas.frame.size
  
  let aspectFittedFrame = AVMakeRect(aspectRatio:sourceRectangleSize, …

当使用初始化程序 Image(uiImage: UIImage) 从 UIImage 创建 SwiftUI 图像时，我很难正确显示 SwiftUI 图像。

我正在使用的代码是

private var rightViewImage: Image

public var body: some View {
        ....
                  rightViewImage
                        .resizable()
                        .renderingMode(.template)
                        .scaledToFit()
                        .foregroundColor(.blue)
                        .frame(width: 20, height: 20)

}

并在方法中设置变量

if let image = UIImage(systemName: "mic") {
   rightViewImage = Image(uiImage: image)
}

我得到了图像的拉伸版本

而不是正确缩放的，这是这个

看起来 .scaledToFit() 不起作用，它像 .fill 一样渲染它。

这是一个错误吗？

我在我的 android 电视应用程序中使用它android.media.tv.TvView来在应用程序内的小空间（片段）中观看直播电视。

在观看现场板球比赛时，客户抱怨他们看不到底部的比分。如何调整宽高比或缩放内容TvView来解决此问题？

我的片段布局：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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.media.tv.TvView
        android:id="@+id/tvView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

初始化TvView的片段代码：

TvInputManager mTvInputManager = (TvInputManager) requireContext()
                .getSystemService(Context.TV_INPUT_SERVICE);
List<TvInputInfo> inputs = mTvInputManager.getTvInputList();

List<String> ids = new ArrayList<>();
for (TvInputInfo info : inputs) {
     if (info.getType() == type) {
         String id = info.getParentId() != null ? info.getParentId() : info.getId();
         if (!ids.contains(id)) {
             ids.add(id);
         }
     }
}
int idx = viewModel.deviceDetails.getSettings().getOtherDetails().getPort() - 1;
String id = ids.get(idx);
tvView.setVisibility(View.VISIBLE);
tvView.tune(id, …

我在div中有一个视频的iframe,如下所示:

<div class="media">
    <iframe>
</div>

我在窗口调整大小时动态设置DIV的大小.

我想缩放iframe以适应div内部,同时保持它的纵横比.大多数代码处理缩放图像,这更容易.

这是我到目前为止,但它不起作用:

jQuery.fn.fitToParent = function()
{
    this.each(function()
    {
        var width  = jQuery(this).width();
        var height = jQuery(this).height();
        var parentWidth  = jQuery(this).parent().width();
        var parentHeight = jQuery(this).parent().height();

        if(width < parentWidth)
        {
            newWidth  = parentWidth;
            newHeight = newWidth/width*height;
        }
        else
        {
            newHeight = parentHeight;
            newWidth  = newHeight/height*width;
        }

        jQuery(this).css({
            'height'     :newHeight,
            'width'      :newWidth'
        });
    });
};

基本上,我希望复制"background-size:contains"对CSS中的图像进行的大小调整,但是对于DIV中的iframe.

谢谢您的帮助!