Question

因此，我尝试将图像插入到具有50％宽度和50％高度的JavaScript的页面中。

我这样做：

someElement.html('<img src="/path/to/img.jpg" alt="" class="sImg" />');

sImg类在样式表中定义如下：

.sImg{
    border: 0;
    width: 50%;
    height: 50%;
}

然而，图像看起来是全尺寸的。

我还通过Firebug进行了检查，图像的宽度和高度均为50％。

Answer 1

首先，如果您要设置宽度和高度，还应该包含display: block;，因为内联元素通常不会被赋予设定的高度。

但更重要的是，当您将宽度（或高度）表示为百分比时，这是父元素的百分比，因此如果父级为1000px宽，则图像宽度为500px（无论实际图像文件的大小是多少。）

如果您使用JavaScript确定当前图片大小并进行更改，请在px而不是%中表达新尺寸。

Answer 2

父容器的高度/宽度是多少？也许浏览器不知道x的50％和y的50％是什么。但如果它知道x和y是什么，那么就可以应用它。尝试

var myWidth = $('.sImg').width(),
myHeight = $('.sImg').height();

myWidth = myWidth / 2;
myHeight = myHeight / 2;

$('.sImg').attr('width', myWidth + 'px').attr('height', myHeight + 'px');

http://api.jquery.com/width/

http://api.jquery.com/height/

Answer 3

你得到的CSS意味着宽度和高度应该计算为父容器大小的一半，而不是图像本身。

你可以做的是这样的：创建一个Image对象并给它一个“onload”处理程序。处理程序可以获得可靠的大小信息（因为图像已经加载），然后可以添加具有适当大小的图像元素。

var img = new Image();
img.onload = function() {
  $(someElement).empty().append($('<img/>', {
    src: img.src,
    alt: '',
    'class': 'sImg',
    css: { width: Math.floor(img.width / 2) + 'px', height: Math.floor(img.height / 2) + 'px', display: 'inline-block' } // display should be set as you need it
  });
};
img.src = yourUrl;

编辑 - 知识渊博的ŠimeVidas指出，设置“宽度”或“高度”属性应该会使正确的事情发生，并且适当减小尺寸保持宽高比。

将图像插入DOM调整为其宽度/高度的50％

3 个答案: