Question

好的，我正在使用HTML上的几个图像。让我举例说明他们的位置！

image 1 <img src=".." width="500" />
image 2 <img src=".."  width="540"/>
image 3 <img src=".."  width="490"/>
image 4 <img src=".."  width="550"/>
.
.And so on.

出于某种原因，我需要将图像的大小增加一些值（缩放图像），如width =“500 + some value”

如果我使用

img {
width:40% or 550px;
height:auto; }

//缩放所有图像并将图像比例设为distube（它们是文本截图，这就是为什么！）

任何人都可以给我一些代码来增加所有图像的大小吗？它也可以是javascript！

快速帮助！

Answer 1

首先，<img>标记是一个内联元素，建议将其放在像<div>元素这样的块元素中。为这些img元素设置className或id。要检索当前标记维度，请使用window.getComputedStyle，下面是演示它的代码。

JS：

function Scale(width_offset, height_offset) {
   var imgs = document.getElementsByClassName("your img tag class name");
   for (var i = 0; i < imgs.length; i++) {
     var curr_width = parseInt(window.getComputedStyle(imgs[i]).width);
     var curr_height = parseInt(window.getComputedStyle(imgs[i]).height);
     imgs[i].style.width = curr_width + width_offset + "px";
     imgs[i].style.height = curr_height + height_offset + "px";
   }
}

Answer 2

你应该可以这样做

var img = document.getElementById("id of your image goes here");
if(img && img.style){
    img.style.height = "insert_num_herepx";
    img.style.width = "insert_num_herepx";
}

example

如何增加一些值的图像大小？

2 个答案: