使用CSS根据较小的尺寸调整图像大小

Users are able to upload an image that get displayed in a square container in the UI. The problem is that they can upload images of any size so they may be to small, portrait, landscape or some odd aspect ratio. Images should always fill the container and be centralli positioned.

用户可以上传在UI中的方形容器中显示的图像。问题是他们可以上传任何大小的图像,因此它们可能是小图像,肖像图像,横向图像或奇数宽高比。图像应始终填充容器并进行中心定位。

I would like to style these images so that smaller dimension is always of specified size while keeping aspect ratio as is.

我想设置这些图像的样式,以便较小的尺寸始终具有指定的尺寸,同时保持纵横比不变。

Suppose I want my images to have resulting dimension 50px (smaller one should):

假设我希望我的图像的结果尺寸为50px(应该更小):

• Portrait image: 100px(w) x 200px(h) => result: 50x100

肖像图像:100px(w)x 200px(h)=>结果:50x100

• Landscape image: 200px(w) x 100px(h) => result: 100x50

风景图像:200px(w)x 100px(h)=>结果:1​​00x50

• Square image: 100px(w) x 100px(h) => result: 50x50

方形图像:100px(w)x 100px(h)=>结果:50x50

I want my images to be at least 50px in either dimension. Using max-width and max-height resizes images to at most 50px...

我希望我的图像在任一维度上至少为50px。使用max-width和max-height将图像调整为最多50px ...

Requirements for original solution

1. CSS only
2. Images should be IMG tags, and not placed as backgrounds

图像应为IMG标记,而不是背景

3. No Javascript

I've tried using max-dimension styles but using this I can always control just one dimension. I want to control both simultaneously.

我尝试过使用max-dimension样式但是使用它我总能控制一个维度。我想同时控制两者。

Requirements for plan B solution

It's possible that original solution restricts too much with its requirements. In this case I would be using CSS backgrounds as described in this question. The problem is that my images aren't defined during design time, but rather during runtime as users are selecting images and I'm using FileAPI to display them before uploading to server. This would require me to define inline styles and I'd like to avoid that.

原始解决方案可能会根据其要求限制太多。在这种情况下,我将使用此问题中描述的CSS背景。问题是我的图像没有在设计时定义,而是在运行时,因为用户正在选择图像,而我正在使用FileAPI在上传到服务器之前显示它们。这需要我定义内联样式,我想避免这种情况。

2 个解决方案

#1

try this css for image tag:

试试这个css的图片标签:

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

in this case you have Portrait and Landscape images as you want(with keeping their aspect ratio).but only Square are stayed 100*100. here is a fiddle .

在这种情况下,您可以根据需要设置纵向和横向图像(保持纵横比)。但只有Square保持100 * 100。这是一个小提琴。

#2

Resulting solution

Unfortunately it isn't possible to resize images directly using only CSS. And with images I mean the IMG elements. This functionality is otherwise supported for element background images. And IMG elements are no different in this regard so we can actually set backgrounds on them too. My image therefore displays a transparent image and has a background set to what image should display.

不幸的是,仅使用CSS直接调整图像大小是不可能的。而图像我指的是IMG元素。元素背景图像另外支持此功能。 IMG元素在这方面没有什么不同,所以我们实际上也可以设置它们的背景。因此,我的图像显示透明图像,背景设置为应显示的图像。

This is the solution I ended up using:

img {
    height: 50px;
    width: 50px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

I'm programmatically setting background image using inline CSS as images are read using FileAPI from local file system and I'm using data URI to set them as backgrounds.

我使用内联CSS以编程方式设置背景图像,因为使用来自本地文件系统的FileAPI读取图像,并且我使用数据URI将它们设置为背景。

Works...