CODEWITHSUNDEEP
css
Boel
Boel

Reputation: 976

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

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.

enter image description here

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/

Upvotes: 4

Views: 2338

Answers (7)

SidOfc
SidOfc

Reputation: 4584

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

Upvotes: 3

paravibe
paravibe

Reputation: 121

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

Upvotes: 1

Racil Hilan
Racil Hilan

Reputation: 25351

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>

Upvotes: 1

areim
areim

Reputation: 3749

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/

Upvotes: 2

Halycon
Halycon

Reputation: 78

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;
    }

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122047

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;
}

Upvotes: 1

justinw
justinw

Reputation: 3966

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.

Upvotes: 3

Related Questions