html - CSS 中的响应图像

Question

我在使用 CSS 创建响应式图像(云)时遇到问题。我希望修复那朵云。

这是我的 HTML:

<div class="r-img" style="background:url(./img/cloud.png); width:587px; height:330px;">
</div>

这是我的CSS:

.r-img img{
    top:30px;
    right:5px;
    overlow:hidden;
    display: block;
}

我希望页面看起来像这样: http://imgur.com/NAsDsNy

当我使用较低的分辨率或 CTRL + Scroll 我看到这个: http://imgur.com/OHSAvrE

我只希望当有人使用 ctrl + scroll 或当有人访问分辨率低于我的页面时图像保持固定。我的分辨率是 1920 x 1080。

Answer 1

你可以尝试使用background-size具有一些百分比值(例如 background-size: 30%)。

DEMO

这里的百分比值是一个关键:当使用它时，它会设置相对于背景定位区域的背景大小。当浏览器窗口缩放时，此区域会相应更改。所以视觉效果是无论缩放级别如何，图像大小都是相同的。