Question

我有一个图片代码，其src属性最初为空（src=""）。在调用API时，返回一个url，它是图像的公共URL。

api返回此URL后，会在src属性（src="protocol://public/url/of/the/image"）上设置

我的问题是图像必须是48px X 48px（它们必须看起来像是缩略图）。如果图像大于那么，它必须减少到那些尺寸，如果它小于那个尺寸，那么它必须拉伸到那些尺寸。

我尝试通过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>标记中。这解决了这个问题。

感谢大家的帮助:)。

Answer 1

CSS属性值不需要引号，所以只需替换：

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

以下内容：

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

否则他们不会被视为有效CSS，这就是您的问题。

这是一个有效的代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

图片宽度未正确呈现

1 个答案: