用于图像大小调整的CSS

我对需要编写的某些CSS有以下要求。我有一张需要适合某个区域的图像，并且其大小需要保持成比例。用于图像大小调整的CSS

我希望它具有25px宽度和25px高度的最大尺寸。但是，如果宽度大于25像素或高度为25像素，则需要调整大小以适应这些尺寸的比例。

现在，我有以下几点：

.imageResizeAccountInfo 
{ 
    height: auto; 
    width: auto; 
    max-width: 25px; 
    overflow: hidden; 
}

这是正确的方式来实现我在寻找什么呢？

来源

2013-12-13 user489041

使用vor max-width和height设置为auto的绝对值对我来说似乎很好。顺便说一句：检查出_object-fit_属性，它对图像做了什么，我们已经可以用背景了。那里还有一个polyfill。 – kleinfreund

您可以在CSS中使用：

background-image: url("path/image.jpg") 
background-size: contain;

来源

2013-12-13 19:48:52

但是，我不想让它占用容器的所有空间？ – user489041

您可以使用background-size：25px auto;如果你想让你的bg在50px框中为25px，高度将自动调整。 –

可能我建议使用：

background-image: url('yourimage.jpg');

background-size: contain;

其中将包含照片，这是家长的高度&宽度。

来源

2013-12-13 19:49:20

但是如果容器是50px乘50px。我只想要图像为25像素×25像素。这仍然有效吗？ – user489041

您需要制作背景图片div 25px x 25px。 –

这将始终为您提供25像素宽的图像，其高度与所做的任何调整大小成正比。如果您想以编程方式确定高度或宽度是否需要调整大小，可以使用javascript来完成。

来源

2013-12-13 19:54:41

使用this guide来保持宽高比。我一直使用它来拍摄照片和视频（使youtube视频非常容易调整大小）。

注意：这只会在您事先知道图像的宽高比，或者添加一些逻辑来确定它时才起作用。如果你想要处理任何未知尺寸的图像，这是行不通的。

类似HTML

<div class='imageResizeAccountInfo'> 
    <div class='content'>Aspect ratio of 1:1</div> 
</div>

添加这个CSS

.imageResizeAccountInfo{ 
    position: relative; 
    width: 100%; 
} 
.imageResizeAccountInfo:before{ 
    content: ""; 
    display: block; 
    padding-top: 100%; /* initial ratio of 1:1*/ 
} 
.content{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
}

而对于定制

/* Other ratios */ 
.ratio2_1:before{ 
    padding-top: 50%; 
} 
.ratio1_2:before{ 
    padding-top: 200%; 
} 
.ratio4_3:before{ 
    padding-top: 75%; 
} 
.ratio16_9:before{ 
    padding-top: 56.25%; 
}

来源

2013-12-13 20:10:49

一些额外的CSS如果你只需要在25x25px来调整最多图像和保持宽高比你只需要设置

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

http://jsfiddle.net/3rfXa/

有三种情况，一个平方的图像将调整为25×25，一个人像图像将被调整到somethingx25和景观的图像将被调整到25xsomething（带的东西小于或等于25）

也许我真的不明白的问题，导致所有其他的答案似乎是为resize

注意，最大宽度和最大高度不支持较旧版本的IE

太复杂

来源

2013-12-13 20:42:33 arieljuod

用于图像大小调整的CSS

回答

相关问题