CSS中的响应式图像答案

【问题标题】：Responsive image in CSSCSS中的响应式图像
【发布时间】：2014-02-14 04:06:23
【问题描述】：

我在使用 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 + 滚动时，我会看到： http://imgur.com/OHSAvrE

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

【问题讨论】：

据我所知，这是不可能的。缩放使一切变得更大，包括背景。
您已将图像添加为背景图像，因此您无法对其应用任何样式，除非您使用背景大小和背景位置等。如果您使用图像标签添加它，那么您上面的 css将工作。要检测浏览器的缩放级别，您需要this 之类的东西，然后您可以相应地调整图像大小
请注意，您可能只是将它错误地添加到您的问题中，但是您的 CSS 中有“overlow”而不是“overflow”。

标签： html css responsive-design

【解决方案1】：

@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;
   ...
}

【讨论】：

【解决方案2】：

将图片放入尺寸已定义的容器中，然后放入图片中并将其尺寸最大化至 100%。

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

这样，图像大小将始终更改，但更改将尊重容器（父级）的尺寸和比例。这在 RESPONSIVE DESIGN 的范围内称为 image resizing。

要为图像容器分配尺寸，请使用流动网格尺寸，例如：

.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;
        }

【讨论】：

【解决方案3】：

您可以尝试使用带有某个百分比值的background-size（例如background-size: 30%）。

DEMO

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

【讨论】：

【解决方案4】：

查看http://www.w3schools.com/cssref/css3_pr_background-size.asp 以调整背景图像的大小。放大页面会使所有内容变大，但在较小屏幕上的人会看到与您完全相同的图像大小，除非您在宽度和高度上使用百分比。

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

【讨论】：