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 +滚动或有人访问分辨率低于我的页面时图像保持固定。我的分辨率是1920 x 1080。

Answer 1

您可以尝试使用background-size一些百分比值（例如background-size: 30%）。

<强> DEMO

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

Answer 2

将图像放置在尺寸已定义的容器内，然后放入图像内部并将其尺寸最大化为100％。

img { position:absolute; max-width: 100%;}

这样，图像大小将始终改变，但更改将遵循容器（父级）的尺寸和比例。这在响应式设计的范围内称为图像大小调整。

要为图像容器指定尺寸，请使用流体网格尺寸，例如：

.2_cols {width: 153px;}

或者如果想要100％宽度：

 .12_cols {width: 920px;}

其他方法是使用背景图片：

  body.cloud { 
        background: url(/img/ban_home.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        position: absolute; z-index: -1;
        }

Answer 3

@media（进入你的css）的一切都比较有趣：

@media (max-width: 767px) { 
  // Your css (of the image) when you are on mobile
}
@media (min-width: 768px) and (max-width: 991px) {
  // Your css (of the image) when you are on tablets
}
@media (min-width: 992px) and (max-width:1199px) { 
  // Your css (of the image) when you are on medium screen
}
@media (min-width: 1200px) {
  // Your css (of the image) when you are on large screen
}

这可以帮助您更好地处理图像。

只需在任意位置配置您的尺寸：

.r-img {
   width:587px; 
   height:330px;
   ...
}

祝你好运

Answer 4

查看http://www.w3schools.com/cssref/css3_pr_background-size.asp以查看背景图片的大小。放大页面会使一切变得更大，但是小屏幕上的人会将图像视为与您完全相同的大小，除非您在宽度和高度上使用百分比。

要测试不同的分辨率而不是放大和缩小，只需将浏览器窗口更改为不同的宽度和高度即可。 Firefox和IE11现在都有响应工具，可以将浏览器窗口更改为可用于测试网站的不同屏幕分辨率。

CSS中的响应图像

4 个答案: