web-dev-qa-db-fra.com

Débordement: caché ne fonctionne pas avec les images

J'ai ce code 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;
}

et le 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>

Ce que je veux faire, c'est faire masquer le débordement de l'image dans l'axe des x (au lieu que la première femme blonde soit sur la deuxième rangée, je veux qu'elle soit recadrée si nécessaire mais reste sur la première rangée et ainsi de suite). Quand je fais overflow-x caché, cela ne fonctionnera pas. Des réflexions sur celui-ci?

cssimagegoogle-chromehtml
15
user3050963

Puisque #portrait n'est pas autorisé à déborder les images, alors vous avez besoin d'un conteneur supplémentaire avec la largeur spécifiée qui contiendra ces images à l'intérieur. Fais-le comme ça:

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

Et puis appliquez

#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

J'ai eu un problème où ma vidéo a disparu lorsque j'ai utilisé le débordement caché. Il s'est avéré que je devais régler la largeur du conteneur et pas seulement la hauteur. Et je n'ai eu à utiliser aucun positionnement sur le conteneur.

2
Ronen Festinger