如何使用百分比作为参数在HTML中调整图像大小?

时间:2012-10-07 15:15:06

标签: html css image

我想在我的网站上调整图片大小。我知道如何通过调整图像大小或计算宽度和高度以及设置像素值来实现。但是我使用不同的dimmensions多次使用相同的图片,所以如果我可以相对于自己的大小调整图像大小,我将花费更少的时间。

<img src='images/logo-beta.png' id="logo" height="75%" width="75%"/>

我试过这个,但问题是大小是相对于其父元素设置的。

2 个答案:

答案 0 :(得分:8)

单独使用HTML或CSS无法自动执行您想要的操作。您需要使用JavaScript来获取图片的尺寸,然后计算这些尺寸的百分比并将其重新应用于图像(

答案 1 :(得分:4)

有一种方法,但并不完美。它需要一个包装元素,其显示设置为“内联块”,并使用“max-width”调整图像大小。

问题是父元素会保留图像的原始宽度,这可能会导致问题,具体取决于您的要求。

示例:http://jsfiddle.net/amustill/GnEw5/