Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Proportional height

Hello guys, it is me again...

I need your help... I have this code for portfolio of one website and I want to make it responsive, now I'm facing problem, I made width flexible but I have no idea how to make height proportional to its width, can you help me out?

Thanks

<div class="portfolio-wrapper">

                <!-- ================================================================================================= -->

                <div class="portfolioitem v-big h-big">
                    <a href="http://www.protectcalgary.com" class="hovereffect" target="_blank">
                        <div class="veralign">
                            <h2>Calgary River Communities</h2>
                            <ul>
                                <li>Responsive Website</li>
                                <li>URL naming</li>
                            </ul>
                            <div style="height:1px;background:#fff;width:59%;margin:20px auto;"></div>
                            <span>www.protectcalgary.com</span>
                        </div>
                    </a>
                    <img src="images/portfolio/calgary.jpg" alt="Photo name" class="grey">
                </div>

                <!-- ================================================================================================= -->

                <div class="portfolioitem v-small h-big">
                    <a href="http://dougblack.ca/" class="hovereffect" target="_blank">
                        <div class="veralign">
                            <h2>Senator Doug Black</h2>
                            <ul>
                                <li>Campaign</li>
                                <li>Print</li>
                                <li>Website</li>
                                <li>Social Media</li>
                            </ul>
                            <div style="height:1px;background:#fff;width:59%;margin:20px auto;"></div>
                            <span>www.dougblack.ca</span>
                        </div>
                    </a>
                    <img src="images/portfolio/dougblack.jpg" alt="Photo name" class="grey">
                </div>

                <!-- ================================================================================================= -->

                <div class="portfolioitem v-full h-small">
                    <a href="http://www.edmonton.ca/zoo" class="hovereffect nogrey" target="_blank">
                        <div class="veralign">
                            <h2>Edmonton Valley Zoo</h2>
                            <ul>
                                <li>Crisis Communication</li>
                                <li>Website</li>
                                <li>Brand</li>
                                <li>Print</li>
                            </ul>
                            <div style="height:1px;background:#fff;width:59%;margin:20px auto;"></div>
                            <span>www.edmonton.ca/zoo</span>
                        </div>
                    </a>
                    <img src="images/portfolio/zoo.jpg" alt="Photo name" class="grey">
                </div>

                <!-- ================================================================================================= -->

                <div class="portfolioitem v-small h-small">
                    <a href="http://www.trinityhills.ca/" class="hovereffect" target="_blank">
                        <div class="veralign">
                            <h2>Trinity Hills</h2>
                            <ul>
                                <li>Website</li>
                                <li>Media Strategy</li>
                                <li>Brand</li>
                            </ul>
                            <div style="height:1px;background:#fff;width:59%;margin:20px auto;"></div>
                            <span>www.trinityhills.ca</span>
                        </div>
                    </a>
                    <img src="images/portfolio/trinity.jpg" alt="Photo name" class="grey">
                </div>

                <!-- ================================================================================================= -->

                <div class="portfolioitem v-big h-small">
                    <a href="http://www.fb.com/MRIalberta/" class="hovereffect" target="_blank">
                        <div class="veralign">
                            <h2>MRI Alberta</h2>
                            <ul>
                                <li>Crisis Communication</li>
                                <li>Brand</li>
                                <li>Landing Page</li>
                                <li>Social Media</li>
                            </ul>
                            <div style="height:1px;background:#fff;width:59%;margin:20px auto;"></div>
                            <span>www.fb.com/MRIalberta</span>
                        </div>
                    </a>
                    <img src="images/portfolio/mri.jpg" alt="Photo name" class="grey">
                </div>

                <!-- ================================================================================================= -->

                <div class="portfolioitem v-big h-big">
                    <a href="http://www.lovebritta.ca/" class="hovereffect" target="_blank">
                        <div class="veralign">
                            <h2>Britta Jewellery</h2>
                            <ul>
                                <li>Brand</li>
                                <li>Writing</li>
                            </ul>
                            <div style="height:1px;background:#fff;width:59%;margin:20px auto;"></div>
                            <span>www.lovebritta.ca</span>
                        </div>
                    </a>
                    <img src="images/portfolio/nakit.jpg" alt="Photo name" class="grey">
                </div>

                <!-- ================================================================================================= -->

                <div style="background:grey;" class="portfolioitem v-small h-big">
                    <a href="http://www.blackcoffeegroup.com/" class="hovereffect" target="_blank">
                        <div class="veralign">
                            <h2>Blackcoffee Group</h2>
                            <ul>
                                <li>Brand</li>
                                <li>Design</li>
                                <li>Print</li>
                                <li>Website</li>
                            </ul>
                            <div style="height:1px;background:#fff;width:59%;margin:20px auto;"></div>
                            <span>www.blackcoffeegroup.com</span>
                        </div>
                    </a>
                    <img src="images/portfolio/blackcoffee.jpg" alt="Photo name" class="grey">
                </div>

                <!-- ================================================================================================= -->

            </div>
.portfolio-wrapper {
    max-width: 1170px;
    width: 95%;
    margin: 0 auto;
    overflow: hidden;
}

.portfoliotext {
    max-width: 850px;
    width: 90%;
    margin: 0 auto 70px auto;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}


.v-small { width: 430px; width: 36.752136752136755%; }
.v-big { width: 700px; width: 59.82905982905983%; }
.v-full { width: 1150px; width: 98.29059829059829%; }

.h-small { height: 370px; }
.h-big { height: 450px; }

.portfolioitem {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    float: left;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: .8547008547008548%;
    letter-spacing: .8547008547008548%;
    padding: 20px;
    position: relative;
}

.portfolioitem img {
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8888;
    transition: all ease 0.3s;
}


.hovereffect {
    z-index: 9999;
    position: relative;
    display: block;
    background: rgba(98,189,180,0.8);
    height: 100%;
    width: 100%;
    color: #FFF;
    text-decoration: none;
    opacity: 0;
    transition: all ease 0.3s;
}

.hovereffect:hover {
    opacity: 1;
}

.hovereffect:hover ~ .grey {
    opacity: 0.5;
    -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}

.hovereffect h2 {
    margin: 0 0 15px 0;
    padding: 0;
    font-weight: 300;
    font-size: 1.750em;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hovereffect ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hovereffect ul li {
    display: inline-block;
    font-size: 0.875em;
}


.hovereffect ul li:not(:last-child):after {
    content: "•";
    margin: 0 10px;
}

.hovereffect {
    letter-spacing: 1px;
}

2 Answers

Ronny Gudvangen
Ronny Gudvangen
4,685 Points

You could try and check out this approach: http://wemadeyoulook.at/en/blog/proportional-scaling-responsive-boxes-using-just-css/

Other wise it's probably easier with some JS.

I tried that but somehow it is not working...

Ronny Gudvangen
Ronny Gudvangen
4,685 Points

A fiddle with working functionality: http://jsfiddle.net/ndzCL/

I've done some of the same before, but it all comes down to so many things that needs to play fine together. I would probably go for a JS alternative, that calculates the height when browser is resized.