-2

我正在使用简单的 css 代码进行个人资料图像样式设置，但图像被拉伸了。我该如何解决？

看看这张图片中的个人资料图片：

在此处输入图像描述

现在我正在使用这个代码：

.Comment_Image_Size {
    height: 32px;
    width: 28px;
}

我也使用了这段代码，但在这种情况下，一些图像更大，一些图像高度更小：

.Comment_Image_Size {
    width: 28px;
}
4

3 回答 3

2

不要修复图像尺寸，我认为您正在处理的项目应该是动态的，如果是，那么您也可以通过服务器端调整图像大小，如果您不想这样做并且想要坚持HTML 和 CSS，而不是使用包装元素，例如div，float将其left分配给 ，分配一些修复height&width并分配 a class，然后使用下面的代码片段

div.class_name img {
   max-width: 100%;
   max-height: 100%;
}

这样，您的图像将按比例调整大小，并且不会再被拉伸

演示（我已附上两个示例，您可以在演示中查看）

在上面的演示中，第一个是我建议给你的，另一个是你可能正在做的，它是拉伸的，所以去max-height和max-width属性。

于 2013-09-18T11:05:00.877 回答
0

为您的班级提供最大宽度和最大高度的最佳解决方案

.Comment_Image_Size {
    max-width:28px;
    max-height:32px;

}

于 2013-09-18T11:07:37.823 回答
0

问题是原始图像的纵横比不同。您需要为每张图像指定正确的高度和宽度，以确保不超过最大宽度/高度（如果不是正确的纵横比，则会减少一个）。

您可能需要在上传时调整图像的大小，以获得正确大小的缩略图，同时保持纵横比如何按比例调整图像大小/保持纵横比？

于 2013-09-18T11:08:12.370 回答