使用
background-size: cover;覆盖整个元件，同时保持纵横比
.background-1,.background-2,.background-3 { background-image: url('//via.placeholder.com/350x150'); background-size: cover; background-position: center; background: url('//via.placeholder.com/350x150') center/cover; margin: 20px; border: 1px solid rgba(0, 0, 0, 0.3);}.background-1 { width: 300px; height: 200px;}.background-2 { width: 200px; height: 50px;}.background-3 { width: 100px; height: 200px;}<div ></div><div ></div><div ></div>如果要显示整个图像，同时保持宽高比，请
background-size:contain;改用：
.background-1,.background-2,.background-3 { background-image: url('//via.placeholder.com/350x150'); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #fbfbfb; background: #fbfbfb url('//via.placeholder.com/350x150') no-repeat center/contain; margin: 20px; border: 1px solid rgba(0, 0, 0, 0.3);}.background-1 { width: 300px; height: 200px;}.background-2 { width: 200px; height: 50px;}.background-3 { width: 100px; height: 200px;}<div ></div><div ></div><div ></div>
