CSS: overflow: hidden does not work for me in the figure tag

Question

CSS: overflow: hidden does not work for me in the figure tag

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I have this HTML code in summary accounts:

<section id="contenido">
    <article class="item">
        <figure class="imagen_item">
            <img src="images/img7.jpg" />
        </figure>
    </article>
</section>

and the CSS style:

#contenido .item .imagen_item
{
    float: left;
    margin-right: 1em;
    overflow: hidden;
}
#contenido .item .imagen_item img
{  
    max-width: 96px;
}

But I can not get the iamgen cut when it overflows ... it looks like this:

Aiudaaa. Greetings.

I have the project on github: link

html css

asked by Ramsés Martínez Ortiz 27.05.2016 в 18:50

source

2 answers

2

You must declare the height in your content, or put white-space: nowrap.

Here is my reference.

link

answered by 27.05.2016 в 20:53

Prevent data duplication in mysql MVC 4 mark all checkboxes

score 1 · Accepted Answer

You were very close. You just had to add height to the same container that has the overflow . You can also add max-height if you want it to have variable height. Something like that

#contenido .item .imagen_item {
  float: left;
  margin-right: 1em;
  overflow: hidden;
  max-height: 100px;
}
#contenido .item .imagen_item img {
  max-width: 96px;
}

<section id="contenido">
  <article class="item">
    <figure class="imagen_item">
      <img src="http://i.stack.imgur.com/i9uzO.png" />
    </figure>
  </article>
</section>

That way you're telling him where you want to start cutting (hiding) the content.

Take a look at the box model guide so you can see which properties control the height of an element. If you do not put dimensions on the element, it is controlled by the dimensions of its content.