CSS Clip and Absolute Positioning

CSS Clip and Absolute Positioning

I wouldn't recommend a pure css solution. Have you considered a library such as phpThumb? From there you just use the following css:

.Thumbnails{float:left}

And references to the thumbnails end up looking like this:

<img src="path/to/phpThumb.php?src=image.jpg&h=100&w=100&zc=1" alt="some image" />

That line would basically create a 100x100 thumbnail, the zc specifies a zoom crop (crop to match aspect ratio, and the thumbnail library does some pretty nifty caching to reduce server load.

overflow:hidden does not clip absolute positioned content

Absolutely-positioned elements are not affected by any overflow setting if the element with that setting is not (or does not contain) its containing block (usually, this means it's not positioned).

In your case, the box is not positioned, so the text is anchored to the viewport instead of the box. The box doesn't know about the text and the viewport is large enough to contain the text, so no clipping occurs at all. You can find the gory details in section 11.1 of the spec.

Giving your box position: relative will cause the text to be positioned relative to the box, and be clipped as a result.

#vbox {  position: relative;  width: 100px;  height: 500px;  overflow: hidden;  background: #afa;}#vtext {  position: absolute;  width: 100px;  top: 250px;}

<div id="vbox">  <div id="vtext">    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>    <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>    <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>    <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>  </div></div>

Why do images with absolute positioning and 0 top offset stack vertically?

images all have the clip css property

The clip CSS property defines a visible portion of an element. The
clip property applies only to absolutely positioned elements — that
is, elements with position:absolute or position:fixed.
https://developer.mozilla.org/en-US/docs/Web/CSS/clip

clip is a property that take an images and display only the part between given coordinate

.dotted-border {
        border: dotted;
        position: relative;
        width: 536px;
        height: 350px;
      }
      
      #top-left, #middle, #bottom-right {
        position: absolute;
        top: 0;
        left:280px;
    }

.dotted-border img {
   position:absolute;
  clip: rect(119px, 255px, 229px, 80px);
}

    <p class="dotted-border">
      <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic">
    </p>

Why the clip property only works on elements with position: absolute or position: fixed

Because it doesn't. The spec says so.

Why the spec says so is a very different question that I don't have an answer to :)

CSS clipped image inside static container positioned absolute to grandparent

Don't use overflow:hidden but consider clip-path instead. It will do the same as overflow and you are not required to consider position:relative

.grandparent {
  display: flex;
  flex-direction: row;
  background-color: blue;
  width: 960px;
  height: 720px;
  position: relative;
  overflow: hidden;
}

.parent {
  width: 100px;
  height: 125px;
  clip-path:inset(0); /* this will hide the overflow */
}

.child {
  position: absolute;
  top: 0;
  left: 0;
}

<div class="grandparent">
  <div class="parent">
    <img class="child left" src="https://cdn.pixabay.com/photo/2013/07/25/13/01/stones-167089_960_720.jpg">
  </div>
  <div class="parent">
    <img class="child right" src="https://cdn.pixabay.com/photo/2013/07/25/13/01/stones-167089_960_720.jpg">
  </div>
</div>

---

Related Topics