How do you center contents in a div with overflow hidden

Question

my fellow code masters.

I'm trying to get my header to pivot to the center. I want the clipping with overflow:hidden but when I resize the screen to portrait it clips the right side of the image and when it's landscape it clips the bottom. I want it to equally clip top, right, bottom and left.

The real image is way more complicating and just using this as the example.

Something like transform-origin: center would be super nice but it doesn't work in this case.

I made a pen Header Trick

Thanks in advance!

      body{
       margin: 0;
       padding: 0;
      }
      .header{
       width: 100%;
       height: 90vh;
       overflow: hidden;
       background-color: black;
      }
      .theSVG{
       width: 100vmax;
       height: 100vmax;
      }

     <div class="header">
      <svg viewBox="0 0 1000 1000" class="theSVG">
       <rect width="1000" height="1000" style="fill:rgb(0,0,255);stroke-        width:3;stroke:rgb(0,0,0)" />
       <rect width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" />
       <rect y="150" width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" />
       <rect y="750" width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" />
       <rect y="900" width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" />
       <circle cx="500" cy="500" r="500" stroke="green" stroke-width="4" fill="yellow" />
      </svg>
     </div>

Ohh my eyes, Caution: using yellow color can harm your eyes :D — Abhishek Pandey, Jan 08 '18 at 06:25

score 0 · Answer 1 · edited Jan 08 '18 at 07:22

0

change your .header{} and thesvg{} style and make them like as follows -

body{
  margin: 0;
  padding: 0;
}
.header{
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  background-color: black;
}
.theSVG{
   max-width: 100vmax;
   max-height: 100vmax;
}

<div class="header">
<svg viewBox="0 0 1000 1000" class="theSVG">
 <rect width="1000" height="1000" style="fill:rgb(0,0,255);stroke-        width:3;stroke:rgb(0,0,0)" />
 <rect width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" />
 <rect y="150" width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" />
 <rect y="750" width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" />
 <rect y="900" width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" />
 <circle cx="500" cy="500" r="500" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</div>

it will be responsive for all size of your browser.

edited Jan 08 '18 at 07:22

CodeIt

3,492
3
26
37

answered Jan 08 '18 at 06:31

Ziaur Rahman

157
10

But that's the same, maybe something happened and undid the changes you made? – abflett Jan 08 '18 at 06:35
you are not using any background image there ...so if you want to style using css, you have to notice about width and height. dont use fixed height and width if you want to make that responsive for all size screen. if not work, try width in percentage. – Ziaur Rahman Jan 08 '18 at 06:43
In portrait mode, the vertical height is not 90%. When in portrait mode it only clips the bottom. :( – abflett Jan 09 '18 at 00:35

score 0 · Answer 2 · answered Jan 08 '18 at 06:39

0

Would it solve your problem if you stored the SVG in a folder and then set it as a background image to the header? You could then set background-size to cover and background position to center. This would crop it equally on all sides.

Something like:

.header{
    width: 100%;
    height: 90vh;
    overflow: hidden;
    background-image: url("assets/img/header-bg.svg");
    background-size: cover;
    background-position: center;
}

answered Jan 08 '18 at 06:39

Craig

620
6
15

That's the effect I want to get but will not work in this case. the svg has classes in it for animation. Well, the real version of it. – abflett Jan 08 '18 at 06:46

score 0 · Answer 3 · answered Jan 08 '18 at 07:12

Alternative 1:

You could try the object-fit:cover property. Dunno if it has the browser support you need.

Q - Is there an equivalent to background-size: cover and contain for image elements?

Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Alternative 2:

Use translate.

Q - Center a large image of unknown size inside a smaller div with overflow hidden

How do you center contents in a div with overflow hidden

3 Answers3