我有一个图像标签,其 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:演示:
页面加载后,向下滚动,您将看到一个带有一些表情符号的小部件,单击“爱”(否则我正在谈论的部分将不会显示)。
编辑 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/