标签: aspect-ratio

我正在使用UIImagePickerController为我的应用程序选择图像.然而,我在维持所选图像的纵横比方面面临一些挑战

例如,

我手机上的原始图像如下(非方形图像):

通过"移动和缩放"页面在iphone上选择图像以裁剪图像后,结果如下:(此处仍保持宽高比)

我的应用程序将在带有方框(200 x 200)的UIImageView中显示所选图像.将所选图像设置为UIImageView(UIImageView.image = selectedImage)后,图像的宽高比不会保持,而是跟随UIImageView的框架:(图像看起来在我的UIImageView中现在倾斜):

在这种情况下,有没有办法保持图像的纵横比？

编辑:更新预期结果

经过一番思考,我意识到解决我的问题的最好方法是确保对于这样的图像(非正方形),我需要将它们"转换"成方形图像,即填充图像顶部和底部的空白区域以制作广场例如

预期图片:(添加了顶部和底部边框)

编辑:使用示例代码更新

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingImage:(UIImage *)img editingInfo:(NSDictionary *)editInfo 
{

    self.imageView.contentMode = UIViewContentModeScaleAspectFill;

    self.imageView.image = image;
    [[picker parentViewController] dismissModalViewControllerAnimated:YES];

    //Compress image
    UIImage *image = [self scaleImage:img toSize:CGSizeMake(612.0,612.0)];

    self.imageData = UIImageJPEGRepresentation(image, 0.75);
}

通过添加代码"self.imageView.contentMode = UIViewContentModeScaleAspectFill;",我能够在uiimageview中获取方形图像

但似乎原始图像仍然不是方形图像,因此当我执行"UIImage*image = [self scaleImage:img toSize:CGSizeMake(612.0,612.0)];"时,仍会出现偏斜问题.我的假设是否正确？无论如何要缓解这个问题,因为我仍然需要在应用程序的其他地方显示"压缩"图像.

如果我有一个<div>相对宽度(例如宽度:50%),是否有一种简单的方法可以使它具有与高度相同的宽度而无需借助JavaScript？

我的网站上有一个用户可以上传图片的图库.

我希望图像位于保持其高度的div中,图像的高度不应超过500px.宽度应自动保持纵横比.

HTML:

<div id="gallery">
    <img src="uploads/my-dynamic-img.jpg">
</div>

我试过这个CSS:

#gallery{
    height: 500px;

    img{
        max-height: 500px;
        max-width: 100%;
    }
}

以上效果很好,画廊总是500px高,图像高度不超过500px.我遇到问题虽然图像较小,但如果用户上传的图片非常小,我希望它"炸毁"至少200px.我知道这可以通过min-height在图像上设置来实现,问题是,如果图像高度小于200px但是说宽度为2000px,则图像的高度会高达200px,但是长宽比是拧紧,因为图像比图像父div更宽.

我怎样才能达到最小高度但保持纵横比？

我有一个JPanel带有彩绘背景图像和一个布局管理器,其中包含其他较小的图像,所有这些都在一个内部JFrame.背景图像非常大,我希望能够保持其纵横比,无论是在大型还是小型显示器上.

最终,我希望能够将我LayoutManager和它的细胞中的较小图像"粘合"到背景图片上.

我四处寻找资源,似乎很多例子都使用了,BufferedImage但我不是; 这会造成问题吗？我将在下面发布我的代码来绘制图像,如果我缺少任何信息,请告诉我.

public class MonitorPanel extends JPanel {
    Image img;
    public MonitorPanel() throws MalformedURLException {
        //add components

        try {
            img = ImageIO.read(new File("src/customer_vlans.jpg"));
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }
protected void paintComponent(Graphics g)
{
    //paint background image
    super.paintComponent(g);
    //g.drawImage(img, 0, 0, getWidth(), getHeight(), this);
    g.drawImage(img, 0, 0, this);

}

}

编辑:我应该提到我知道宽高比公式: 原始高度/原始宽度x新宽度=新高度 然而,我不知道如何正确使用它对我有利.

我设计的网络应用程序主要供同事和客户使用(不是PDA,手机等).随着越来越多的用户配备16:9型屏幕,传统的屏幕布局不再符合人体工程学.

例如,长垂直导航栏可能不完全适合,或者可能需要滚动复杂形式才能移动到下一个输入字段.

你是如何应对这种发展的？你是在水平展开还是坚持旧的布局？这不是一个真正的问题吗？

UPDATE

感谢所有的答复.我发现它们很有用.以下是我想到的一些想法:

• 我认为4:3格式可能仍然是最广泛使用的,但我希望能够改变.

• 此外,我在公司访问的大多数用户都将其所有窗口最大化(真的!),因此调整浏览器大小以适应内容的想法并没有帮助.

• 就我而言,大多数网络应用程序涉及搜索和显示信息或数据输入(其中一些可能涉及大型和复杂的表单).它主要是我关注的数据输入应用程序.也许AJAX和Tabbed控件可能是一种前进的方式.

我想使与图像布局肖像图像内的div与固定纵横比3:2.图像的大小是327x491px.

主要问题是图像之间不需要的空间.如何仅使用HTML/CSS 将图像对齐为马赛克？

HTML:

<div id="pictures1" class="_pictures1 grid">
    <div class="_pictures1-01"><div style="width:125px;height: 188px; background: red;"><img src="" width="125" height="188" alt="" /></div></div>
    <div class="_pictures1-02"><div style="width:192px;height: 288px;background: green;"><img src="" width="192" height="288" alt="" /></div></div>
     ... SO ON ...
</div> 

CSS:

._pictures1 {
    width: 935px; height: 490px;
    margin: -26px 0 0 59px;
    float: left;
    top: 20%; left: 20%;
    position: absolute;
    border: 1px gray solid;
}
._pictures1 div {position: absolute;}
._pictures1-01 {top: 0px; left: 35px;}
._pictures1-02 {top: …

我不希望我的窗口"仅水平"或"仅垂直"调整大小.我可以在我的窗口上设置一个可以强制执行此操作的属性,还是有一个可以使用的漂亮的代码隐藏技巧？

我有宽度:240我有宽高比:2.40我需要根据这两个变量得到高度.公式是什么？

我有以下css:

.mod.left {
background-image: url("http://www.myimage.jpg");
display: block;
height: 160px;
overflow: hidden;
width: 175px;
}

这对应于这个HTML:

<div class="mod left"></div>

这导致了这个烂摊子:

如果我使用css3 background-size:175px 160px; 宽高比真的搞砸了,导致像这样的混乱:

有没有办法拉伸图像以适应div？但在保持纵横比的方式？我想要一个自动裁剪.

我正在创建一个图库,我想在一个页面上列出相册中的所有图像:大图片样式:

与Big Picture不同,我希望图像按比例缩放以适应容器的宽度div(.section-images设置为margin: auto 2em;宽度是用户浏览器的宽度减去2*2em)尽可能不使它们大于90%的高度视口.

正如您想象的那样,400x600缩放以适应宽度的肖像照片将会很长,用户将无法在屏幕上看到整个图像,这就是为什么我需要将宽度缩放限制为不超过90%的高度.

<section class="section-images">
    <div class="image-box">
        <div class="image-large">
            <a href="#"><img foo1></a>
        </div>
        <div class="image-description">
          blabla1
        </div>
        ... MORE IMAGES WITH DESCRIPTONS ...
    </div>
    etc
</section>

在我拥有的每张图片下.image-description,这个高度会有所不同.

重要的是,在任何时候,单个图像(so .image-large)应该适合视口,无论它是横向还是纵向.

如果可能的话我想只用CSS做这个,如果CSS不可能只用javascript.