问题标签 [fluid-images]

这个是针对 CSS 专业人士的：

我想知道是否可以使用纯 CSS在本网站上实现图像缩放行为？

请注意，图像仅在浏览器窗口的高度而不是宽度发生变化时才开始缩放。（只是说因为我在网上找到的所有信息都是关于宽度的改变。）

真正的症结似乎是不同的阈值：如果横向图像与已经缩小的纵向图像具有相同的高度，它们就会开始缩小。

非常感谢您对此事的任何反馈！

我使用低于 989 像素（最大图像尺寸）的媒体查询为我的背景图像创建了一个断点。我不用来显示图像，因为我想为不同的设备使用不同的图像（这样移动设备当然不会下载最大的图像）。（每个图像都在特定的断点中定义）。早点说吧，这是现场直播http://www.glorkianwarrior.com

这个css是这样的：

这使得一旦页面达到 988 像素或以下（低至 321 像素），启动图像就会变得流畅。在浏览器宽度小于 640 像素之前，它实际上不会改变它的宽度/高度。在其下方嵌套在 .splash 下的导航栏中发生的事情不会改变其位置。这是因为它与.splash 的高度相关。html 看起来像这样：

如果我不给它那个高度，它就会消失。我试过给它 100% 或页面本身的百分比。我尝试给它的父母一个特定的高度，然后在 .splash 上做 100%，但这并没有改变导航栏的位置。

是否可以让此导航根据浏览器大小更改其大小？我是否必须想办法在页面上使用每个图像在自己的 div 中的图像，并使用媒体查询在不相关的 div 上显示：none？

我想创建一个以照片为背景的网页，背景是屏幕宽度的 300%，并且每 33.33333% 有一张居中的响应式照片，因此它可以保持其比例方面。

我的html代码：

我的 CSS 代码：

感谢您对代码的任何帮助

我有一个max-width1280 像素的流体网格。

它由五列设置组成 - grid2、grid4、grid6、grid8 和 grid10。

总的来说，乍一看它看起来不错，但是在检查代码时（在 Firefox 和 google chrome 中检查），最小的点（grid2）的高度小了一个像素。

其他点max-width的高度应该是 320px，但它只有 319px。

我无法正常工作。

看我的小提琴：http: //jsfiddle.net/4ya94/

我希望你们中的任何人都可以帮助 \O/

我的背景图像仅在某一点上是流动的。调整浏览器大小时，它开始缩小

你可以在这里看到我在说什么

我有一个 div 浮动在图像旁边，它是一个帖子列表。右侧的 div 在项目符号列表中保存有关该特定帖子的信息。div 不是完全流动的，但会在某些断点处改变宽度。div 我希望图像的最小高度始终相同。在内容的顶部和底部的 div 内有图像，我想在 div 的顶部和底部显示它们。

我可以让框延长图像的长度和位置：相对底部图像，因此它是流畅的，或者我可以让图像是位置：绝对在 div 内，即位置：相对。但这会扼杀流动性。

我可以两者兼得吗？

这是我的小提琴：http: //jsfiddle.net/4Kyye/1/

和CSS：

My background of my site is responsive and works great.But I'm having issues with the images. I want them to look "fixed" as in the same position with the background no matter the resolution,. Example re-sizing the browser from 990px by 537px to 990px by 270px the image will look like it never moved because the width/height will expand or contract depending on the resolution of the browser.

Good news I figured the CSS to make the WIDTH of the image fluid with the background! Bad news is if I make height 100% or 14%, the height looks the same. Is it true that I need to specificity my height? Why not width? How?

SO my question is how would I show my image to look like its in the SAME position on the screen if my resolution is very large or very small? Please provide a example and not just a link. Like I said I figured out to make the width of the image fluid, just not the height but if you have a better way please share.

I'm using Drupal to build my site FYI.

<---------------------------------------------EDIT---------------------------------------->

Here are two example of what I am talking about. Please ignore all images BUT the image labeled IMAGE1.

CSS for Image1:

First Image- Browser Resolution: 480px by 356px

Second Image- Browser Resolution: 520px by 630px

我在我的一个项目（http://suprb.com/apps/nested/）中使用了这个脚本。但是它不适用于移动设备。网站浏览器崩溃。任何想法？

你的帮助是非常可观的。

谢谢，

我在流体容器内有一个图像（当前为 1305 x 352 像素），如下所示：

当页面宽度等于或小于图像宽度时，图像会缩放到页面的整个宽度，这就是我想要的。

但是，当页面宽度较大时，图像保持向左对齐。我希望它留在页面中间。

我尝试在 div 上使用 margin-left 和 margin-right: auto ，甚至制作了一个最小宽度为 1306px 的媒体容器并尝试了我所知道的一切，但我无法让图像居中。有任何想法吗？

嗨 - 任何人都知道我如何将 div 包裹在（或将其放置在）绝对定位的流体宽度/高度图像周围。我想不通。

谢谢 B。

和...

这是一个：http: //jsfiddle.net/20owLkxy/1/