javascript - 图像宽度未正确渲染

标签 javascript jquery html css dom

我有一个图像标签,其 src属性最初为空 ( src="" )。调用 API 时,会返回一个 url,该 url 是图像的公共(public) url。

api返回此URL后,将其设置在src上属性 ( src="protocol://public/url/of/the/image" )

我的问题是图像必须恰好为 48px X 48px(它们必须显示为缩略图)。如果图像大于该尺寸,则必须将其缩小到这些尺寸;如果图像小于该尺寸,则必须拉伸(stretch)到这些尺寸。

我尝试通过 css(外部样式表以及内联样式)设置高度和宽度属性和/或高度和宽度。

有4个这样的<img>标签。并非所有图像都以指定的高度和宽度渲染,未按照高度和宽度正确渲染的图像不是特定图像,而是相当随机的。

我希望我已经充分描述了问题。 谢谢您

编辑 1:我的代码 标记

<div class="some-container" id="first-one"> <img src='' class="thumbs"/> </div>
<div class="some-container" id="second-one"> <img src='' class="thumbs"/> </div>
<div class="some-container" id="third-one"> <img src='' class="thumbs"/> </div>
<div class="some-container" id="fourth-one"> <img src='' class="thumbs"/> </div>

JavaScript:

$.ajax({
 // call to the api which returns the urls as an array
 success: function(data){
     // Assume data['url*'] gives the url
     $('#first-one').attr('src', data['url1']);
     $('#second-one').attr('src', data['url2']);
     $('#third-one').attr('src', data['url3']);
     $('#fourth-one').attr('src', data['url1']);
  }
});

CSS:

.thumbs{
    height: '48px';
    width: '48px';
}

当我检查时,我发现网址已正确设置,并且也呈现了正确的图像,但尺寸不准确。 如前所述,我还尝试过设置内联样式,并使用高度和宽度属性,但无济于事。

编辑 2:演示:

http://new.fundinghunt.co/x-ai-raises-23-million-for-its-ai-personal-assistant-plans-to-launch-this-fall/

页面加载后,向下滚动,您将看到一个带有一些表情符号的小部件,单击“爱”(否则我正在谈论的部分将不会显示)。

编辑 3:解决方案:

问题终于解决了 chsdk

指出我必须添加 display: inline-block;到链接。此外,我还必须包装 <img>标签和链接分开 <div>..</div>标签。这解决了问题。

谢谢大家的帮助:)

最佳答案

CSS 属性值中不需要引号,所以只需替换:

.thumbs{
   height: '48px';
   width: '48px';
}

具有以下内容:

.thumbs{
   height: 48px;
   width: 48px;
}

否则它们将不会被视为有效的 CSS,这就是你的问题。

这是一个工作片段:

    .thumbs {
      height: 48px;
      width: 48px;
    }
<div class="some-container" id="first-one">
  <img src='' class="thumbs" />
</div>
<div class="some-container" id="second-one">
  <img src='' class="thumbs" />
</div>
<div class="some-container" id="third-one">
  <img src='' class="thumbs" />
</div>
<div class="some-container" id="fourth-one">
  <img src='' class="thumbs" />
</div>

关于javascript - 图像宽度未正确渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37022917/

相关文章:

javascript - 禁用表单按钮

javascript - 即使受到限制也会添加空白元素

Javascript 正则表达式 urlify 文本

javascript - 如何在Web组件中设置标签的内部文本

jquery - 如何使用lightbox插件colorbox?

javascript - 使用 jQuery 复制 CSS 过滤器

javascript - PHP,X-SendFile : Sending file together with outputting text to the browser (via echo)

javascript - jQuery 事件 : prepend a callback handler to already existing ones

javascript - 如何将复选框列添加到 jquery JTable?

html - 如何让banner图片全长延伸,logo居中?