javascript - 图像宽度未正确呈现

Question

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

此URL被api返回后，设置在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';
}

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

编辑 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>标签。这解决了问题。

谢谢大家的帮助:)

Answer 1

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>