Question

我有一个图片来源：

var _img = <img src="../images/yadayada.jpg">

我希望它放大或缩小它而不会裁剪它，但我宁愿不抓住元素并改变css。

我试过了：

_img.height = 200;

和

_img.style.height = 200

但第一次播种它，第二次播种没什么。

Answer 1

样式值需要单位，因此样式设置如下：

_img.style.height = "200px";

这将更改图像的缩放尺寸。如果您只设置高度或仅设置宽度，则另一个应缩放以保持纵横比。您必须确保图像所在的HTML布局是灵活的，并且可以处理图像更改大小。

图片调整大小演示：http://jsfiddle.net/jfriend00/K8GJQ/

Answer 2

如果您尝试更改现有图片或为您尝试创建的新图片设置尺寸，则有点难以判断......

语句var _img = <img src="../images/yadayada.jpg">本身不会做任何事情，除非导致你的JS无法加载（它只是一个字符串，并且缺少周围的引号和分号）。

如果您尝试定位HTML中已有的图片，请为其<img>标记指定您可以定位的唯一ID，然后设置宽度或高度。

在HTML中：<img id="yadayadaImage">

在JS中：

var myImage = document.getElementById('yadayadaImage');
myImage.style.width = "200px";

此处仅设置style.width或style.height应保持图像不被裁剪，因为其他尺寸应自动展开。如果它仍然被裁剪，请检查父元素的宽度和宽度。高度属性，因为这可能是限制大小的因素。

如果您实际上尝试创建具有特定来源和尺寸的新图像，则上述内容将无效。您需要使用这些属性创建新的<img>元素，然后将其附加到文档中。

var targetDiv = document.getElementById("myPhotoDiv");    
var imgTag = document.createElement('img');              
imgTag.id = "yadayadaImage";                         
imgTag.className = "uncroppedImage";               
imgTag.src = "../images/yadayada.jpeg"; 

//you COULD set height & width properties here, but that's what CSS is for. 
imgTag.style.width = "200px";

targetDiv.appendChild(imgTag); //add the new img to the page

最好的方法，但是你说你不想这样做，就是使用CSS并创建一个类，你可以将其重用于其他你不一定知道特定宽度或高度的图像。

.uncroppedImage{
    width:100%;
}

Answer 3

更好地为您的图片设置ID

<img id="myImg" src="../images/yadayada.jpg">

并使用下面的脚本

var myImg = document.getElementById('myImg');
if(myImg && myImg.style) {
    myImg.style.height = '200px';
}

如何在不裁剪的情况下更改图像的大小？

3 个答案: