在CSS中的响应式图像

使用CSS创建响应式图像（云）时出现问题。我希望这个云被修复。在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.

来源

2014-01-23 Botez Sebastian Adrian

据我所知，这是不可能的。缩放使得一切变得更大，包括背景。 – Joeytje50

你已经将图像添加为背景图像，所以你不能应用任何样式，除非你使用背景大小和背景位置等。如果你使用图像标签添加它，那么你的上面的CSS将工作。要检测浏览器的缩放级别，您需要[this]（http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers），然后你可以相应地调整图像的大小 – Pete

只需要注意，您可能刚刚将其添加到了错误的问题中，但在CSS中“溢出”而不是“溢出”。 – DBS

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

DEMO

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

来源

2014-01-23 14:40:13 vbo

非常感谢。我非常感谢你的帮助。背景大小是诀窍！干杯! –

放置一个容器，其尺寸被定义，然后将图像内部和它`大小最大化至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; 
     }

来源

2014-01-23 14:41:07 datelligence

-1

退房http://www.w3schools.com/cssref/css3_pr_background-size.asp调整背景图像。放大页面会使一切变得更大，但在较小的屏幕上的人会看到与您的尺寸完全相同的图像，除非您在宽度和高度上使用百分比。

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

来源

2014-01-23 14:43:53 CheckeredMichael

一切皆与@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; 
    ... 
}

好运

来源

2014-01-23 14:46:16 agastalver

在CSS中的响应式图像

回答

相关问题