web-dev-qa-db-ja.com

オーバーフロー：hiddenは画像で機能しません

私はこのCSSコードを持っています：

#portrait{
  height: 300px;
  width: 550px;
  border: solid;
  margin-right: auto;
  margin-left: auto;
  Word-wrap:break-Word;
  overflow:hidden;
}
.image{
  float:left;
  height: 30%;
  border:solid 1px;
  padding: 1px;
  posit ion:relative;
}

およびhtml：

<div id="portrait">
<img class="image" src="http://media.indiatimes.in/media/photogallery/2012/Dec/best_images_of_2012_1355117665_1355117684.jpg"/>
<!--Can't pull all images in here because it thinks my question is spam-->
<img class="image" src="http://adrao.com.sapo.pt/soajo_sol.jpg"/>
<img class="image" src="http://www.befrielsen1945.dk/temaer/internationalt/krigensgang/kilder/ofre.jpg"/>
<img class="image" src="http://ionenewsone.files.wordpress.com/2009/08/oj-simpson-smiling-murder-trial.jpg"/>
<img class="image" src="http://images.nymag.com/images/2/daily/2009/10/20091006_gossipgirl_560x375.jpg"/> 
<img class="image" src="http://images.nymag.com/images/2/daily/2009/10/20091006_gossipgirl_560x375.jpg"/>
</div>

私がやりたいことは、x軸の画像オーバーフローを非表示にすることです（最初の金髪の女性が2列目にあるのではなく、必要に応じて切り抜いても1列目に残るようにします）。 overflow-xを非表示にすると、動作しません。これについて何か考えはありますか？

cssimagegoogle-chromehtml
15
user3050963

#portraitが画像をオーバーフローさせることは許可されていないので、追加のコンテナが1つ必要ですこれらの画像を内部に保持する指定された幅を持ちます。次のようにします：

<div id="portrait">
    <div id="wrapper">
        your images
...

そして適用する

#wrapper{
    height:30%;
    overflow:hidden;
    width: 1000px; /* it is only important to be bigger then parent for one image width size */
}

.image{
  height: 100%;
21
Hrvoje Golcic

オーバーフローを非表示にして使用すると、ビデオが消えるという問題がありました。コンテナの幅だけでなく、高さも設定する必要がありました。そして、コンテナの位置を使用する必要はありませんでした。

2
Ronen Festinger