0

我有一个循环显示图像的背景，这些图像没有固定的大小。

我的问题是我找不到一个简单的响应框架来调整专用背景图像的大小。网站上有很多用于普通图像的插件。

  1. 我网站的背景总是必须显示图像。
  2. 允许裁剪，允许图像必须重新定位在网络浏览器的中心。
  3. 允许使用 jQuery 或 @Media，我不介意。

我的图像和 div 如下所示：

<div style="width:100%; height:100%; background:white; position:absolute; margin-left:0px; margin-top:0px;>
    <img src="image1.png">
    <img src="image2.png">
    <img src="image3.png">
</div>

许多插件将宽度设置为 100%，将高度设置为自动。假设浏览器宽度为 200 像素，浏览器高度为 800 像素，这将不起作用。图像不会覆盖整个屏幕并保持其纵横比。图像下方和上方会有一个“间隙”，因此在这种情况下，高度应为 100%，宽度更改为自动。当然，如果浏览器高度为 200 像素，浏览器长度为 800 像素，则反过来；

我想要的示例：http: //www.martinlogin.se/

4

1 回答 1

0

您要求根据屏幕方面应用两种不同的场景。这可以通过媒体查询来完成，但您需要确定一些宽度和高度。

从基于宽度的尺寸开始：

#backgroundDiv {width: 100%; height: auto;}

当站点比某个点窄时，切换到基于高度的大小：

#backgroundDiv {width: auto; height: 100%;}

您需要根据预期受众最可能的屏幕尺寸/外观场景、您使用的图像等来决定转换发生的位置。

为了获得更大的灵活性，比如针对特定的纵横比而不是宽度，您需要编写脚本。

于 2013-03-03T19:23:10.570 回答