响应式设计：如何调整图像/背景图像的大小并垂直对齐 div？

Posted 2023-03-06

【中文标题】响应式设计：如何调整图像/背景图像的大小并垂直对齐 div？

【英文标题】：Responsive design: How to resize images/background images and align divs vertically?

【发布时间】：2013-04-14 23:15:56

【问题描述】：

我正在尝试响应式设计。我的图像目前没有调整大小。在我的标记中，我还为某些需要调整大小的 div 应用了背景图像。

这是 html 视图：http://jsbin.com/emojeg/2

在此处查看代码：http://jsbin.com/emojeg/2/edit

对于 800 像素到 1100 像素之间的屏幕宽度，我想调整图像的大小。对于 800 像素以下的任何内容，我想垂直对齐相框 - 无论屏幕宽度允许，每行 1 或 2 个。

目前，当我将浏览器调整为较窄的宽度时，最多 2 个框架会换行到下一行，但如果我继续调整大小，相框的背景似乎会被切断，一些图像似乎会消失。不知道如何解决这个问题。

【问题讨论】：

实际上，您并没有调整图像大小，是吗？当我缩小浏览器时，我看不到调整大小，只有图像移动

@Chococroc 在上面的网址中，不，我没有调整大小。我尝试在另一个版本中调整它的大小，但我的绝对 div 等还有其他问题，我发现很难将其转换为响应式。

好吧，为了确定一下，在这个例子中，你只是想确保在调整大小时都进入列，但是你想要实现的是列+调整大小，对吗？

@Chococroc 好吧，基本上在更宽的屏幕上，调整大小时，我希望框架和背景按比例调整大小。在移动横向上，我希望同时显示所有四个相框。在移动纵向上，我希望一次将滑块转换为一个项目。我知道这可能需要对 HTML 标记本身进行调整。我可能需要重新创建布局。我只是不确定如何解决这个问题 - 媒体查询是否足够，或者我是否需要使用 jQuery 来执行此操作，或者为移动设备加载完全不同的 HTML 文件。

【参考方案1】：

这是因为您使用的滑块具有大量绝对定位和固定宽度/高度。我建议使用真正具有响应性的东西，例如 Flexslider (http://www.woothemes.com/flexslider/)

但如果你不想这样做，你可以从 .mrpv_container 类中删除 position:relative 和固定高度 --

.mrpv_container 
    width: 100%;
    height: 710px;
    position: relative;
    overflow: hidden;

可能还需要清理 CSS 的其余部分，但这会产生预期的效果吗？

【讨论】：

关于 Flexislider，不，我不能使用它，因为我想要实现的有点不同。您的 CSS 建议似乎在某种程度上有效。它以较窄的浏览器宽度垂直对齐 div。我想我仍然需要做一些清理工作，让它看起来更好看。你知道为什么我的图片和背景图片没有调整大小吗？

还有一件事...如果我想为移动显示创建不同的标记怎么办 - 我该怎么做？例如，在移动设备上，如果我想一次显示一帧而不是 4 帧，我将不得不更改整个标记。我如何实现这一目标？我认为这不能仅通过媒体查询来完成。对此有何建议？

你想要达到的效果是什么？如果您希望调整图像大小，则必须从 img CSS 中删除 max-width:100% 并将其更改为仅宽度：100%。至于移动设备，我是否认为您希望它是桌面上的四合一滑块，但移动设备一次只显示一个项目？

在这种情况下，将 max-width 更改为 width 似乎不起作用。它似乎炸毁了图像。我认为这是因为图像的父 div 设置了固定宽度。但是如果我不将其设置为固定的宽度或高度，则不会出现背景图像。我仍然无法理解这一点。在我的示例中，除了图像之外，还有一些背景图像。

是的，您对移动设备的看法是正确的。在更宽的屏幕上，我希望同时显示所有四个相框，但在窄屏幕（纵向显示的移动设备）上，我希望一次将滑块转换为一个项目。我知道这可能需要对 HTML 标记本身进行调整。我可能需要重新创建布局。我只是不确定如何解决这个问题 - 媒体查询是否足够，或者我是否需要使用 jQuery 来执行此操作，或者为移动设备加载完全不同的 HTML 文件。

【参考方案2】：

为了让您的图像和背景正确调整大小，我建议进行以下更改。

首先使用百分比设置图像宽度和高度，为边缘周围的框架留出足够的空间，然后使用position:relative 添加从顶部偏移的百分比而不是设置边距。您无需担心水平位置，因为它已经居中，除非您想稍微调整它以解决您的帧图像不完全均匀的事实。

ul.mrpv_slider li div img 
    position:relative;
    top:11%;
    width:67%;
    height:78%;

然后将background-size:100% 100% 添加到 *image_container* 中，这样框架的背景图像也会调整大小以匹配容器。

ul.mrpv_slider li div.image_container  
    text-align:center;
    background-image:url(http://i36.tinypic.com/5feusn.png);
    background-position:bottom;
    background-repeat:no-repeat;
    margin-right:10px;
    display:inline-block;
    zoom: 1;
    *display: inline;
    height:324px;
    width:250px;

    /* this is the line you need to add */
    background-size:100% 100%;

此时，您可以在媒体查询中覆盖容器的 width 和 height，图像和帧都会相应地自行调整。

我不确定您打算在窗口大小更改时对布局做什么，但是您当前将宽度设置为 100% 并将高度设置为自动的媒体查询肯定不起作用。

例如，当屏幕宽度小于 600 像素时，您可以使用如下查询将图像缩小一半：

@media screen and (max-width: 600px) 
    ul.mrpv_slider li div.image_container 
        height:162px
        width:125px;
    

【讨论】：

感谢您的回答。我还没有机会在我的代码上测试它，但它给了我一些洞察力。

【参考方案3】：

我也一直在尝试响应式设计，发现 Twitter 的“引导程序”非常有用。它只有 3 个文件，我用它来构建我的所有网站。如果您还没有，请查看：http://twitter.github.io/bootstrap/

【讨论】：

是的，我最初想使用引导程序，但认为没有它会更容易，因为我的滑块有许多不同层的绝对定位。如果没有其他方法，我可能不得不重新访问引导程序。

【参考方案4】：

好吧，我使用 twitter bootstrap 和 http://responsiveimg.com/ 来使图像响应并根据屏幕和图像大小修复纵横比。

如果您使用的是图像滑块，那么 jquery bxslider 也很有帮助