如何根据其嵌套框调整图像大小

Question

有一个名为： SPAM网站。我正在尝试使用js，jquery和一些CSS制作该网站的同一主页。

现在，问题是如何根据中间的框确定图像尺寸。 如何像SPAM一样创造最佳的用户体验。

您可以通过以不同分辨率或大小不同的SPAM查看SPAM网站来体验。

我该怎么做？ 答案和代码帮助或建议，以获得最佳SPAM用户体验？

Answer 1

这是Flash ...但是您可以使用一些jQuery进行相同操作：

的HTML：

<div id="container"></div>

CSS：

#container {
    min-width: 500px;
    width: 100%;
    height: 100%;
    position: relative
    background: url('path') 0 0 no-repeat;
}

jQuery的：

$(window).bind("resize", function() {
    var $winwidth = $(window).width(); //specify some padding here
    $("#container").attr({
        width: $winwidth
    });
});

Answer 2

首先，使<did id='main'>成为屏幕的宽度

#main { width:100% }

然后，内部的图像应具有类似的样式：

#main img { width:100% }

请注意，未设置图像高度，以使其以正确的比例自动缩放。

这应该有助于获得类似于所述站点的效果。

Answer 3

您可以使用

margin: 0 auto;

在内部元素上，使其水平对齐。