CSS - How to make a div as wide as a containing child img

Question

I have this simple markup for a div:

<div class="gallery__card">
    <img class="gallery__card__img" src="1.jpg">
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>

But I want gallery__card to be as wide as gallery__card__img, so the text below the image doesn't take the full page width.

I want to avoid setting fixed widths, since this is supposed to be responsive.

Is there a way to accomplish this without JS nor fixed widths?

jsfiddle: http://jsfiddle.net/6h19oa1q/

Answer 1

The reason .gallery__card is wider than gallery__card__imgis because of the text you have in .gallery__card. If you remove the text, it will stay as wide as .gallery__card__img. See here.

You can set you imgs to have width: 100% and remove your static height property like here, but then you have to make sure to maintain aspect ratios of all the images you are using; or you will have differing heights (if that's an issue).

Otherwise, you have to change the way you are constructing your elements.

Answer 2

The non-fixed width thing seems to be out of the question here, when you make a div element display: inline-block it will resize to it's "biggest" child which in this case is text that doesn't wrap without a width constraint either.

As @Quoid mentioned in his answer you can also make the images scale to width: 100% or height: 100% depending on what you need^[1,2].

Another solution is to possibly not use basic image tags but instead use another div element with an inline background-image: url(...) property. How awful this sounds it's a good alternative if you want to have an image tag on steroids and aren't too OCD-ish about some inline CSS.

Refs for aspect-ratio

1. http://daverupert.com/2012/04/uncle-daves-ol-padded-box/
2. Maintain the aspect ratio of a div with CSS

Answer 3

you can use JS (my solution is with using jQuery), in each iteration you are looking on child element with selector img and then setting up parent element width

$('.gallery__card').each(function() {
    var newWidth = $(this).children('img').width();
    $(this).width(newWidth);
});

example: http://jsfiddle.net/cwp83vkq/

Answer 4

Try this http://jsfiddle.net/6h19oa1q/5/

CSS

.gallery__card {
    margin-top: 10px;
    display: table;
    margin-right: 5px;
    border: 1px solid;
    width: 1%
}

.text {
    overflow: hidden;
}

.gallery__card__img {
    height: 100px;
}

Answer 5

This should make exactly what you want. You can play around with the width of the parent element to make it fit a responsive layout.

HTML

    <a href='link/tofile.jpg'>
       <div class="gallery__card">
          <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
       </div>
    </a>

CSS

      .gallery_card {
       width: 300px;
       border: 1px solid #000;
       margin: 0 auto;
       height: 300px;
       background: url('link/tofile.jpg');
       background-size: cover;
       background-repeat: no-repeat;
       position: relative;
    }

      .gallery_card .text {
       position: absolute;
       color: #000;
       text-decoration: none;
       text-align: center;
       background-color: #fff;
       bottom: 0;
       left: 0;
       padding-top: 5px;
       padding-bottom: 5px;
    }

Answer 6

Try this: jsFiddle

Add this style to all images that you have

img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

And remove all height restrictions from .gallery__card__img

Answer 7

You also define the width in responsive designs, but you just base it on percentage or other similar methods. In your case, you can set the container's width to some percentage like 50%, and set the maximum size to the actual size of the images (because they will look blurry if you stretch them beyond their actual size) which is 500px, then set the width of the images to 100% of the container:

.gallery {
    overflow: hidden;
    -webkit-user-select: none;
    border: 1px solid red; /* This is just for testing */
    box-sizing: border-box; /* This is just for testing */
}
.wrapper {
}
.gallery__card {
    width: 50%;
    max-width: 500px;
    margin-top: 10px;
    display: inline-block;
    margin-right: 5px;
    border: 1px solid;
}
.gallery__card__img {
  width: 100%;
}

<div class="gallery">
    <div class="wrapper">
        <div class="gallery__card">
            <img class="gallery__card__img width-1" src="http://www.cbre.us/o/losangelesmarket/AssetLibrary/GreaterLosAngelesMarket_mainimage.jpg">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        </div>
         <div class="gallery__card">
            <img class="gallery__card__img width-1" src="http://students.marshall.usc.edu/undergrad/files/2012/04/Selling-Your-Los-Angeles-Home1.jpeg">
            <div class="text">Sed at elit nec ligula pellentesque congue eget a elit. Sed in purus nisi. Nulla dapibus non est ac lacinia. Suspendisse potenti.</div>
        </div>
    </div>
</div>