如何根據其嵌套框調整圖像大小

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;

在內部元素上，使其水平對齊。