Question

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

我希望它的最大尺寸为25px宽度和25px高度。但如果它大于25px宽度或25px高度，则需要调整大小以适应保持其比例的那些尺寸。

现在，我有以下内容：

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

这是实现我想做的正确方法吗？

Answer 1

您可以在css中使用：

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

Answer 2

我建议使用：

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

＆安培;

background-size: contain;

其中包含照片的父母身高＆amp;宽度。

Answer 3

这将始终为您提供25px宽的图像，其高度与任何调整大小成比例。如果您想以编程方式决定是否需要调整高度或宽度，可以使用javascript进行。

Answer 4

使用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;
}

还有一些用于自定义的附加CSS

/* 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%;
}

Answer 5

如果您只需要以25x25px调整图像大小并保持纵横比，则只需设置

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

http://jsfiddle.net/3rfXa/

有三种情况，平方图像将调整为25x25，肖像图像将调整为大小为x25，风景图像将调整为25xsomething（小于或等于25）

也许我真的不明白这个问题，因为所有其他答案对于调整大小来说似乎太复杂了

请注意，较旧版本

不支持max-width和max-height

用于图像大小调整的CSS

5 个答案: