Open this Pen and resize the viewport width. Haven’t used them? Ahmad Shadeed conducts a fantastic deep dive in this article. Combining this layout technique and a fluid container max-height using the CSS clamp() function, we can develop something that adjusts based on the available viewport space while anchoring the hero image to the center of the container.ĬSS clamp(), along with the min() and max() comparison functions, are well-supported in all modern browsers. Because of this, the content strategy team has requested that some of the pertinent page content below the hero remain visible in the viewport as much as possible. Although the image is capped with a max-width, it scales up to be quite tall on desktop. ![]() ![]() Here’s a common hero section with a headline overlapping an image. In the demo, there is a checkbox that toggles the overflow visibility so that we can see where the image dimensions expand beyond the container on larger viewport widths.
0 Comments
Leave a Reply. |