我想在我的网站上调整图像的大小。我知道如何通过调整之前的图像大小或计算宽度和高度并以像素为单位设置值来做到这一点。但是我多次使用不同尺寸的同一张图片,所以如果我可以根据自己的大小调整图像的大小,我会花费更少的时间。
<img src='images/logo-beta.png' id="logo" height="75%" width="75%"/>
我已经尝试过了,但是问题是大小是相对于其父元素设置的。
仅使用 HTML 或 CSS 无法自动执行您想要的操作。您需要使用 JavaScript 来获取图像的尺寸,然后计算这些尺寸的百分比并将它们重新应用于图像(以像素为单位)
有一种方法,但并不完美。它需要一个显示设置为“inline-block”的包装元素,并使用“max-width”调整图像大小。
问题是父元素保留了图像的原始宽度,这可能会根据您的要求引起问题。
示例:http: //jsfiddle.net/amustill/GnEw5/