html - 当数据为 image/jpeg;base64 时，背景图像的纵横比

Question

我有一个 div，background-image 设置为 data:image/jpeg;base64 格式:

<div style="background-image: url(data:image/jpeg;base64,/9j/4AAQ...

我想使用可用空间显示符合宽高比的完整图像。我通常会使用:

width: 90vw;
height: 100vh;
background-size: contain;
background-repeat: no-repeat;
background-position: center;

在这种情况下，图像使用完整的 div 大小进行拉伸(stretch)。有什么建议么？

更新:带数据的 Div: http://jsfiddle.net/witepo/bksmhtwc/

更新 2:预期结果:http://1drv.ms/1uTj8Nd分区:http://codepen.io/anon/pen/LEZPjj

Answer 1

试试这个

background-size: cover;
background-repeat: no-repeat;
background-position: center center;