跨背景高度缩放 CSS 图像答案

【问题标题】：Scale CSS Image Across Background Height跨背景高度缩放 CSS 图像
【发布时间】：2014-10-21 05:18:55
【问题描述】：

我正在尝试根据浏览器的大小来缩放 CSS 图像并保持它的高宽比，但是，我对网站编程特别不擅长，此时我已经搞砸了编码。我的图像与计算机上的比例非常吻合，但无论我做什么，当我在更大的屏幕上查看时，它都无法缩放，我得到的只是底部有巨大间隙的完全相同的图像。我会提供我的代码，但就像我说的，它变得非常混乱。有什么建议吗？

【问题讨论】：

分享你的 HTML 和 CSS
欢迎堆栈溢出！问 js 和 css 问题的一个好方法是使用fiddle.jshell.net。这样会更容易为您提供帮助。

标签： html css image-scaling

【解决方案1】：

使用

background-size: cover;

它会随着你的窗口缩放图像

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

【讨论】：

这是一个 JSFiddle 示例。唯一重要的背景样式是 background-size:cover;和背景位置：右下角；。 CSS 的其余部分仅用于样式设置。您可以将此技术用于全尺寸背景，或将其应用于页面中的 div。也试试 max-width:100%;height:auto; - jsfiddle.net/TalkingRock/p834kjpd