为了优化网络性能,首先生成一张1像素的透明gif base64图片:

<img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" style="width:20px;border:solid 1px #999;" />

使用背景图片的size属性的cover、contain值实现图片效果,利用透明图片撑开标签:

<style>
.image {
    background-repeat: no-repeat;
    background-size: cover; // or 'contain'
    background-position: center;
}
.image img {
    width: 100%;
}
</style>
<div class="image" style="background-image: url(img_url_str);">
    <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==">
</div>

如果最终不想要1比1的效果,可以设置img标签padding负值,实现不同的图片比例:

.image img {
    width: 100%;
    padding-top: -50%; // 实现宽高2比1效果
}


评论

提交取消回复
[face]@
[uname]  [add_time]
[content]
[reply]
加载更多评论