Set container box to a certain height?

Question

I want the '.box' to be 33% of height. However, trying to set it below, doesn't work. It a container box, meaning it holds an image and a text hovering over the image. When the box is at 33%, I want the image to crop down and show only 33% of it.

https://www.tutorialrepublic.com/codelab.php?topic=faq&file=placing-text-over-an-image-with-css

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Text Block Over Image</title>
<style>
    .box{
      margin-top: 100px;
      width: 100%;
      height: 33%;
        position: relative;
    }
    .box .text{
        position: absolute;
        z-index: 2;
        text-align: center;
        top: 0;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        height: 100%;
        width: 100%; /* Set the width of the positioned div */
    }
  .img {
    width: 100%;
  }
</style>
</head> 
<body>
    <div class="box">
        <img class="img" src="/examples/images/kites.jpg" alt="Flying Kites">
        <div class="text">
            <h1>Flying Kites</h1>
        </div>
    </div>
</body>
</html>

.box should be 33% of what? the body, the viewport .. ? – aroundtheworld Sep 28 '21 at 02:09 — aroundtheworld, Sep 28 '21 at 02:09

Seegy · Answer 1 · 2021-09-28T02:26:06.557

0

Both the html element and body element have their height CSS property set to auto by default. This means that they do not have an explicit height. They will grow to be as tall as it's content. This is why height: 33% on the child of the body will have no effect.

In this case, if you want to get the height of 33% of the height of the document, you can use height: 33vh instead.

So I would change your example code to this. Because you want to only show 33% of the image, I would add overflow: hidden

.box{
    position: relative;
    display: inline-block; /* Make the width of box same as image */
    height: 33vh;
    overflow: hidden;
}

edited Sep 28 '21 at 02:26

answered Sep 28 '21 at 02:16

Seegy

374
2
15

if I set .box to height: 33vh, I still have to set it to the .img as well. No other way around it? – journalsup Sep 28 '21 at 02:19
Did you want to resize the image to be 33% of the body height or have it cut off? – Seegy Sep 28 '21 at 02:21
@journalsup I edited my answer to show you only 33% of the image as you mentioned in your question. – Seegy Sep 28 '21 at 02:28

score 0 · Answer 2 · answered Sep 28 '21 at 04:09

body{height: 100vh;}
.box{
      margin-top: 100px;
      width: 100%;
      height: 33%;
        position: relative;  
    overflow: hidden;
    }
    .box .text{
        position: absolute;
        z-index: 2;
        text-align: center;
        top: 0;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        height: 100%;
        width: 100%; /* Set the width of the positioned div */
    }
  .img {
    width: 100%;
  }

    <div class="box">
        <img class="img" src="https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__480.jpg" alt="Flying Kites">
        <div class="text">
            <h1>Flying Kites</h1>
        </div>
    </div>

score 0 · Answer 3 · answered Sep 28 '21 at 04:31

0

In order this to work, the .box's parent should have a height. body is the parent of .box , so you should give it a height of 100vh.

body {
  height: 100vh;
}

everything else is fine.

answered Sep 28 '21 at 04:31

Dinesh Rout

91
2
8

Set container box to a certain height?

3 Answers3