CODEWITHSUNDEEP
htmlcss
jeebs
jeebs

Reputation: 325

How do I override a parent element's width with an implicit child element's width?

I'd like to specify the width of a div element to be the width of a child img element contained within. However, this width is implicit depending on the size of the source image.

The first flex item shows the effect I'm trying to achieve, however, I've had to manually set the value of the width to 150px. How can this be achieved dynamically (preferably without javascript)?

<!DOCTYPE html>
    <html>
    	<head>
    		<style>
    			.flex-item {
    				border: 1px solid #30b0b0;
    				color: #303030;
    				text-align: center;
    				padding: 5px;
    			}
    			
    			.flex-container {
    				border: 1px solid #30b0b0;
    				display: flex;
    				justify-content: space-around;
    				list-style: outside none none;
    				padding: 5px;
    			}
    		</style>
    	</head>
    	<body>
    		<ul class="flex-container">
    			<li class="flex-item">
    				<div style="width: 150px; margin: auto;">
    					<img height="100px" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Metrostation_Mladost_1.JPG/150px-Metrostation_Mladost_1.JPG">
    					<p>This text stays within the image</p>
    				</div>
    			</li>
    			<li class="flex-item">
    				<div>
    					<img height="100px" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Metrostation_Mladost_1.JPG/150px-Metrostation_Mladost_1.JPG">
    					<p>This text sticks out further than the image</p>
    				</div>
    			</li>
    		</ul>
    	</body>
    </html>

Upvotes: 3

Views: 407

Answers (2)

undefined
undefined

Reputation: 4135

According to this it can't be done in css :(

But if you are interested in the scripted alternatives..

JavaScript (demo)

window.addEventListener("load", function () {
    var flexItems = document.querySelectorAll(".flex-item");
    for (var i = 0, l = flexItems.length; i < l; i++) {
        var flex = flexItems[i];
        var div = flex.children[0];
        var img = div.children[0];
        div.style.width = img.width + "px";
    }
});

jQuery (demo)

$(document).ready(function(){
    $(".flex-item").each(function(){
        var flex = $(this);
        var div = flex.find("div");
        var img = div.find("img");
        div.css("width",img.css("width"));
    });
});

Hope it helps!

Upvotes: 0

leishman
leishman

Reputation: 1047

I think making the image container display: table and giving the caption the style display: table-cell; caption-side: bottom should do the trick.

Note, I got some help from this answer: Image caption width to same as image

It was image caption functionality you were looking for, I believe!

<!DOCTYPE html>
    <html>
    	<head>
    		<style>
    			.flex-item {
    				border: 1px solid #30b0b0;
    				color: #303030;
    				text-align: center;
    				padding: 5px;
    			}
    			
    			.flex-container {
    				border: 1px solid #30b0b0;
    				display: flex;
    				justify-content: space-around;
    				list-style: outside none none;
    				padding: 5px;
    			}
              
                .image-group-container {
                  display: table;
                }
              
                .caption {
                  display: table-caption;
                  caption-side: bottom;
                }
    		</style>
    	</head>
    	<body>
    		<ul class="flex-container">
    			<li class="flex-item">
    				<div style="width: 150px; margin: auto;">
    					<img height="100px" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Metrostation_Mladost_1.JPG/150px-Metrostation_Mladost_1.JPG">
    					<p>This is in a div with a hard-coded width, so it stays in the proper boundaries.</p>
    				</div>
    			</li>
    			<li class="flex-item">
    				<div class="image-group-container">
    					<img height="100px" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Metrostation_Mladost_1.JPG/150px-Metrostation_Mladost_1.JPG">
    					<p class="caption">This text also stays within image without hard-coding the width.</p>
    				</div>
    			</li>
    		</ul>
    	</body>
    </html>

Upvotes: 2

Related Questions