Question

如何在HTML和CSS中相对于自己的大小重新缩放图像？

我希望图片可以扩展到自己大小的170%，或者将其缩小到自己大小的50%，而不是它的父元素的大小。< / p>

我试过这个：

<div><img src="0001.svg" height="50%"></div>

它相对于其父元素的高度重新缩放。

Answer 1

这有效：

<script>
function Start() {
OPIC = document.getElementById('PIC')
var x=OPIC.width, y=x=OPIC.height, pct=.7 // = 70%
OPIC.height=pct*y; OPIC.width=pct*x;
}
</script>
<body onload="Start()">
<img id='PIC' src=...>

然而，对于IE和Edge，我似乎正在失去图片

Answer 2

使用css应该做的伎俩

img.resize{
    width:170%; /* you can use % */
    height: auto;
}

Answer 3

为父div指定一些宽度。然后为图像指定宽度或高度以保持图像的纵横比。

以下是 LINK

<强> HTML：

   <div class="image_resize">
        <img src="http://www.sxc.hu/img/certified_images/crt_melaniemar.jpg" />
    </div>

<强> CSS：

    .image_resize {
        width:260px;
    }
    .image_resize img {
        width:60%;
    }

如何在HTML和CSS中相对于自己的大小重新缩放图像

3 个答案: