1

水平方向に整列された画像の簡単な例を作成しました。

すべての画像は、「ラップ」div の高さに調整されます。 http://i.imgur.com/VOA1pBG.png

それでも、ウィンドウを小さくすると、画像が div から出てきて下に移動し始めます: http://i.imgur.com/VKUA4Ju.png

ウィンドウを小さくすると画像が小さくなるようにしたいです。ブラウザのサイズに横向きに収まるように。既存のページを作成するために使用されるコードは次のとおりです。

html:

<h1> Thriller </h1>

    <div id="week-wrap">
    <div id="sunday" class="day"><img src="http://www.allipadwallpaper.com/wp-content/uploads/tropical-island-ipad-wallpaper-500x500.jpg"></div>
    <div id="monday" class="day"><img src="http://mountains.insidrinfo.com/mountains-asia/Media/mountains-asia.jpg"></div>
    <div id="tuesday" class="day"><img src="http://s4.favim.com/orig/50/beautiful-city-light-night-street-Favim.com-460323.jpg"></div>
    </div>

CSS:

body{margin: 0 auto;}
#week-wrap {border: 1px solid #000; height: 300px;}
.day {float: left;}
img {height: 100%;}
4

3 に答える 3

0

各画像の周りの div を削除することをお勧めします。画像を直接スタイルできます。また、ラッパーに明示的な高さを設定する代わりに、フロートを含むように自動的に展開されるようにブロックの書式設定コンテキストを確立するために、overflow: hidden を設定します。

次のようなマークアップで終了します。

<h1> Thriller </h1>

<div id="week-wrap">
    <img src="http://www.allipadwallpaper.com/wp-content/uploads/tropical-island-ipad-wallpaper-500x500.jpg" id="sunday" />
    <img src="http://mountains.insidrinfo.com/mountains-asia/Media/mountains-asia.jpg" id="monday" />
    <img src="http://s4.favim.com/orig/50/beautiful-city-light-night-street-Favim.com-460323.jpg" id="tuesday" />
</div>

と CSS のような:

body{margin: 0 auto;}
#week-wrap {border: 1px solid #000; overflow: hidden; }
#week-wrap > img { width: 33.333%; height: auto; float: left;}

この結果: http://jsfiddle.net/4Aytd/

var imageSizer = function () {
    var images = document.querySelectorAll('#week-wrap > img'),
        numImages = images.length,
        imageWidth = (100/numImages) + '%',
        i;
    for(i = numImages-1; i >= 0; i--) {
        images[i].style.width = imageWidth;
    }
};

http://jsfiddle.net/4Aytd/4/

于 2013-05-19T00:11:58.803 に答える
0

サイズ変更ウィンドウでJavaScriptを使用して画像divのサイズを変更してみてください：

$(window).bind("resize", function(){  //Adjusts image when browser resized  
    // do your image size logic here
    // $('#week-wrap').width(); // width of div container
});
于 2013-05-19T00:03:43.170 に答える