用1像素透明图片，实现图片cover、contain效果

为了优化网络性能，首先生成一张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效果
}