2

一連の画像があり、それらを連続して表示したい、つまり

[img][img][img][img][img][img][img][img][img][img][img][img][img][img][img]

オーバーフロー部分を非表示にしたい。

私の現在のHTMLは次のとおりです。

<div id="gallery">
  <img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
  <img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
  <img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
  <img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
  <img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
  <img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
  <img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
  <img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
  <img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
</div>

これはCSSです：

#gallery {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
#gallery .gallery_img {
  width: auto;
  height: 200px;
}

これがjsFiddleです。次のように、画面の端に半分の画像を表示したいと思います。

ここに画像の説明を入力

ただし、完全な画像のみを表示することしかできません。HTML / CSS コードをどのように変更すればよいですか?

4

4 に答える 4

4

パーセンテージでオーバー幅を使用し、マスク div を使用するだけです。

デモ

#gallery {  
  width: 200%; /* this is the trick */
}
#gallery img {   /* and no need to add class="gallery_img" to IMGs anymore */
  height: 200px;
}

#wrapper {  
  height: 200px;
  overflow: hidden;
}



<div id="wrapper">
  <div id="gallery">
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />    
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />    
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />        
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />        
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />        
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />        
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />        
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />        
  </div>
</div>

編集

最も単純な解決策も追加します (@RupaliShinde によって投稿されました)。これは、white-space属性の正しい使用法を示しており、明らかに再現が難しいためです (コメントを読む):

#gallery {  
  width: 100%; 
  overflow: hidden;  
  white-space: nowrap; /* this is the trick */
}
#gallery img {  
  height: 200px;
}

デモ

于 2013-01-11T10:00:27.403 に答える
4

このフィドルを見てください - http://jsfiddle.net/jQkHp/

ギャラリーにラッパー div を追加しました。

#gallery {
  position: absolute;
  left: 0;
  top: 0;
  width: 1200px;
  height: 200px;
  overflow: hidden;
}

#gallery .gallery_img {
  width: auto;
  height: 200px;
}

#wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

これを適切に機能させるには、javascript を使用してギャラリー div の幅を設定する必要があります (現時点では幅を推測しているだけです)。

編集 - 内部の画像に基づいてギャラリーの幅を計算するための js を追加しましたhttp://jsfiddle.net/jQkHp/1/

var galleryWidth = 0;

$('#gallery > img').each(function(){
  galleryWidth += $(this).width();
});

$('#gallery').css('width', galleryWidth);
于 2013-01-11T09:50:37.297 に答える
2

これをCSSに追加するだけです

<style>
    #gallery {
  width: 100%;
  height: 200px;
  overflow: hidden;
  white-space: nowrap; 
}
#gallery img {
  width: auto;
  height: 200px;
}
</style>

残りのコードはそのままにします。

于 2013-01-11T10:03:08.267 に答える
1

含まれている div 内の順序付けられていないリストに画像を配置し、各画像を独自の LI に配置してから、css の inline-block に表示するように設定することをお勧めします。

もちろん、jquery を使用して画像をスクロールする何らかの方法が必要になります。

于 2013-01-11T09:49:29.690 に答える