私はいつものようにウェブページを作成しています。しかし、私は問題があります。私は "背景"と呼ばれるdivがあり、このdivには<img>-tagで膨大な量の画像が読み込まれます。唯一の問題は、画像にfloat:left;があるため、完全な画像を表示できないため、画像が新しい行になることです。ウェブページに画像を入力するにはどうすればよいですか？
しかし、画像の一部を見ることができるように画像を表示したいが、一方の面から他方の面まで、そして画面の下までずっと伸びていきたい。私はスクロールバーなどを必要としません。これを行う簡単な方法はありますか？私はJavaScriptを使用する必要がありますか、またはCSSでこれを解決できますか？その場合、誰かが正しい方向に私を向けることができますか？ :)
ここには私がしようとしているもののexampleがあります。
例としてoverflow：hiddenとwidth：110％を本体に使用しています。これが、部分画像を表示できるようにするものです。
あなたはロジックを求めていると思いますか？
start
get viewport width
determine a width for images that will tile evenly
create row of images
loop until rowcount*image height < viewport height
end
さて、私は固定幅と高さでサムネイルをたくさん持っています。私が尋ねていたことは、たとえそれが可能であったとしても、どうすれば新しい行を止めることができるのですか？私は、画像を均等に並べることを望んでいない、私は彼らが同じ高さで続けることを望む。 – Ms01
あなたは既にいくつかのコードを持っているように思えます - あなたはフィドルなどにそのスニペットを投稿できますか？私はまだ混乱している - すべての画像を1列にしたい、縦に伸ばして幅を保持したい？ – Snuffleupagus
私はあなたが私の言いたいことを理解してくれることを願っています。画像が新しい行に続いているときに、右のギャップがはっきりと分かります。私が望むのは、そのイメージを「可能な限り」見ることができることです。しかし、表示されない画像の残りの部分はscoll barを作成してはいけません。 – Ms01
これはなんですか？
<html>
<head>
<style type="text/css">
ul {display:block; width=100%;}
ul li {float:left;}
ul li img {width:150px;}
</style>
</head>
<body>
<div class="background">
<ul>
<li><img src="imgs/myimage01.jpg" alt="my image 1"/></li>
<li><img src="imgs/myimage02.jpg" alt="my image 2"/></li>
<li><img src="imgs/myimage03.jpg" alt="my image 3"/></li>
<li><img src="imgs/myimage04.jpg" alt="my image 4"/></li>
<li><img src="imgs/myimage05.jpg" alt="my image 5"/></li>
<li><img src="imgs/myimage06.jpg" alt="my image 6"/></li>
<li><img src="imgs/myimage07.jpg" alt="my image 7"/></li>
<li><img src="imgs/myimage08.jpg" alt="my image 8"/></li>
<li><img src="imgs/myimage09.jpg" alt="my image 9"/></li>
<li><img src="imgs/myimage10.jpg" alt="my image 10"/></li>
<li><img src="imgs/myimage11.jpg" alt="my image 11"/></li>
<li>etc...</li>
</ul>
</div>
</body>
</html>
コメントに記載されているように、ソース画像の形状とサイズは重要です。標準化されている方がずっと簡単です。
ええ、よく私は親指の爪の写真がたくさんあり、彼らは標準化されています。しかし、チャンスの解像度が画像に影響を与え、おそらく完全に伸びないでしょう。解像度を計算し、高さと幅を設定する唯一のソリューションですか？ – Ms01
BTWはFirefoxのFirebugを使用して、ウェブサイトのCSSレイアウトを検索/テストします。彼らがあなたの例で行ったことは、イメージクラスをサイズに制限して左に浮かせるCSSクラスを作成することでした。
高さ：120ピクセル
幅：95px
<img class="class_name" src="image_source"/>
ええ、私もそれに注意しました。しかし、それはあなたが見ることができるスペースが不足している写真の一部を見ることができるということをどのように説明していますか？ – Ms01
だけ
#background {
white-space:nowrap;
}
#background img {
height: 100px;
}
1行に入れたくない場合は、空白を削除するだけです：nowrap
あなたが何をしたいのかの例がある場合、なぜ希望の出力を生成するコードを解読しようとしなかったのですか？ **あなたの**コーディング中にロードブロッキングに遭遇したときに*具体的な質問をしてください。 – MetalFrog
私はしようとしましたが、そのコードは圧縮されて圧縮されています。ブロックが新しい行を作成しないようにする方法を理解できません。私は具体的にしようとしていますが、私は前にこのようなことをしたことがないので、何を求めているのか分かりません。 – Ms01
私は何を求めているのかは、どのように進むべきかということです。私は完全な解決策を求めていません。 – Ms01