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