Not Quite, But Almost

While the simple answer is no, it's not entirely feasible. The longer explanation is that under certain conditions and compromises (like additional html markup and restricted functionalities), it can be achieved to some extent.

If you follow this CSS styling:

.square {
    position: relative;
    margin: 20px;
    display: inline-block; /* could be float */
    overflow: auto; /* UPDATE: if content may overflow square */
}
.sq-setter-w {
    width: 100%;
    height: auto;
    visibility: hidden;
}
.sq-setter-h {
    width: auto;
    height: 100%;
    visibility: hidden;
}
.sq-content {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

And use this HTML structure:

<div class="square" style="width: 200px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>
<div class="square" style="height: 100px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-h"/>
    <div class="sq-content">Here is content</div>
</div>
<div class="extrawrapper">
<div class="square" style="width: 200px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>
</div>
<div class="extrawrapper">
<div class="square" style="height: 100px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-h"/>
    <div class="sq-content">Here is content</div>
</div>
</div>

You might achieve results similar to this fiddle.

The main components to make this work are:

1. Using a square image as it dictates proportional sizing for elements. Only the img element can proportionally size based on the image itself.
2. Determining whether to set width or height so that you can correctly assign a class to the image for sizing. Optionally, setting width or height directly on the img eliminates the need for a class with a percentage value. In my example, assume the size is set on the wrapper div (.square).
3. To ensure the div collapses around the image driving proportions, apply display: inline-block or float to the div (as in the provided css).
4. If wanting the div to behave more like a block, an extra wrapper div is needed as demonstrated in the third and fourth examples.

Note that this solution involves considerable extra mark-up. While using JavaScript may be simpler in many cases, I wanted to demonstrate that, to some extent, achieving proportional resizing using only HTML and CSS is possible.

Update: Demonstrating Flexible Sizing

For an example where a percentage determines size, refer to this fiddle. Here is the corresponding html code with width set to 30%:

<div class="square" style="width: 30%">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>

Today, I was looking to achieve a similar effect and thought of using an image. However, I decided to explore other options and ended up finding this solution through Google.

Interestingly, you can create a square without the need for an image src by using a hash, thus saving a http request.

For different aspect ratios, it's recommended to use a src. For example, for a ratio of 16:9, the image should be 16px wide and 9px high (as small as possible).

Evaluating Different Techniques (Check out other responses in this thread)

img vs. padding-bottom

You can see a comparison between the two techniques in this fiddle. The img version is more versatile and can handle pixel values smoothly.

In cases where percentage values are used, both techniques yield similar results. However, the padding method eliminates the need for extra markup (<img src="#"/>).

Conclusion:

Each technique has its own advantages and disadvantages depending on the implementation requirements.

HTML

<div class="floater">
    <div class="square square_noImg">
        <div class="inner">Hey blue you look totally squared</div>
    </div>
    <div class="square square_img">
        <img src="#"/>
        <div class="inner">Hey red you seem off</div>
    </div>
</div>

CSS

.floater {
    font-size: 0;
}
.square {
    position: relative;
    display: inline-block;
    width: 100px;
    margin: 0 5px; 
}
.square_noImg {
    padding-bottom: 100px;
    background: red;
}
.square_img {    
    background: blue;
}
img{
    width: 100%;
    height: auto;
    border: 0;
    visibility: hidden;
}
.inner {
    position: absolute;
    top: 10%;
    right: 10%;
    bottom: 10%;
    left: 10%;
    background: white;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    padding: 10px 5px;
}

For those looking for a pure JavaScript solution following @Dave's suggestion on @praveen-kumar's response:

function makeSquare(element) {
    element.style.height = element.offsetWidth + 'px';
}

You can easily implement this function wherever needed:

makeSquare(document.querySelector('your-selector'));

When using relative units like %, the size of an element will be calculated in relation to its container. However, you can create a square element by setting both dimensions using units such as px or em.

It's not possible to achieve this using just CSS. With the help of jQuery, you can do the following:

var childWidth = $('.child').width();
$('.child').css({'height': childWidth + 'px'});

View a demonstration at http://jsfiddle.net/4Jnfq/

An alternative solution using only CSS can be found here in the "Resize with content" section.
Even though it was originally intended for circles, you can eliminate the border-radius: 50% to adapt it for squares as well.