Question

我有占位符图片，我知道真实图片的大小例如，我的占位符图片是30x30，我的真实图片是1200 * 800。但我的屏幕尺寸只有600px宽。

我给的图像的实际大小如下

<img src="abc.png" width="1200px" height="800px"/>

但这个尺寸比我的屏幕尺寸600px宽。所以我添加了一个如下的CSS

img { 
    max-width:100%;
    height: auto;
}

结果是图片将显示为600x600的大小。如果我删除height:auto，则会显示为600x800。

我希望它显示为600x400，与实际图片的比例相等。我该怎么做？可以使用JQuery。

Answer 1

HTML

<img src="abc.png"/>

和css

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

不需要jquery。

Answer 2

占位符必须与原始图像具有相同的宽高比。如果它有其他比例，您应该使用JavaScript并将原始图片比率存储在某个变量中。然后，使用这些信息设置max-width和max-height属性（甚至width和height）的值。

但是，如果你知道什么是宽度和宽度您的图像的高度将是，然后您可以在您的CSS中设置静态值。像这样：

img { 
   max-width: 600px;
   max-height: 400px;
}

Answer 3

不可能使用具有设定宽高比的静态占位符来包含具有动态比率的图像。

示例： 如果占位符为600X400则表示宽高比为3：2 只有宽高比为3：2的图像才能完美地适用于此版本：1200X800,900：600

因此，如果您有标记<img src="" height="100px" width="400px">，它将适用于具有上述尺寸1：4的图像。但是如果图像像800 * 800那样它会被拉伸和倾斜。

我建议使用以下标记

HTML

<img src="your src file"/>

CSS

img
{
    width:600px;
    height:auto;    
}

这将使图像零售其原始尺寸

Answer 4

所以你不想动态地重新计算图像以适应屏幕并且不会丢失图像比例吗？

所以你需要对图像进行一些计算。

var newHeight = img.height / img.width * screenWidth;
var newWidth = screenWidth;

我创建了一个可以帮助您的演示：

<强> Demo