how to set div width with image size

Question

I have div with id="picBox" that image tag and two div that contains pic title and pic content in it. I want "picBox" width equal with the image tag. but I can't do it. what can I do to solve it? thanks.

The CSS code:

 .galleryPicBox { width: 100%; position: relative; height: 420px; padding: 0; text-align: center; } .galleryPicBox div { width: 100%; height: 100%; position: relative; margin: 0 auto; color: white; visibility: visible; opacity: 1; text-align: center; transition: visibility 1s, opacity 1s linear; _webkit_transition: visibility 1s, opacity 1s linear; } .galleryPicBox:hover div { visibility: hidden; opacity: 0; } .galleryPicBox div div { width: 100%; height: auto; line-height: 35px; background: rgba(180, 180, 180, 0.5); } .galleryPicBox div:last-child { position: absolute; bottom: 0 !important; padding: 5px 10px; line-height: 22px; } .galleryPicBox .imgStyle { max-height: 420px; max-width: 100%; image-orientation: from-image; } the html code: 

 <div id="picBack" runat="server" class="galleryPicBox" style="background:rgb(93, 147, 184);"> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="imgStyle" /> <div id="divPicDetail" runat="server"> <div id="divPicTitle" runat="server"> pic Title </div> <div id="divPicContent" runat="server"> picContent </div> </div> </div> 

Answer 1

Remove padding: 5px 10px; from your style shown below

 .galleryPicBox div:last-child {
        position: absolute;
        bottom: 0 !important;
        padding: 5px 10px; // Remove this line
        line-height: 22px;
    }

 .galleryPicBox { width: 100%; position: relative; height: 420px; padding: 0; text-align: center; } .galleryPicBox div { width: 100%; height: 100%; position: relative; margin: 0 auto; color: white; visibility: visible; opacity: 1; text-align: center; transition: visibility 1s, opacity 1s linear; _webkit_transition: visibility 1s, opacity 1s linear; } .galleryPicBox:hover div { visibility: hidden; opacity: 0; } .galleryPicBox div div { width: 100%; height: auto; line-height: 35px; background: rgba(180, 180, 180, 0.5); } .galleryPicBox div:last-child { position: absolute; bottom: 0 !important; line-height: 22px; } .galleryPicBox .imgStyle { max-height: 420px; max-width: 100%; image-orientation: from-image; } the html code: 

 <div id="picBack" runat="server" class="galleryPicBox" style="background:rgb(93, 147, 184);"> <img width='100%' src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="imgStyle" /> <div id="divPicDetail" runat="server"> <div id="divPicTitle" runat="server"> pic Title </div> <div id="divPicContent" runat="server"> picContent </div> </div> </div> 

Answer 2

You can use jquery for it like this

 var imagWidth = $('.imgStyle').width(); var picBox = $('.galleryPicBox').width(imagWidth); 

 .galleryPicBox { /*width: 100%; */ position: relative; height: 420px; padding: 0; text-align: center; background:rgb(93, 147, 184); } .galleryPicBox div { width: 100%; height: 100%; position: relative; margin: 0 auto; color: white; visibility: visible; opacity: 1; text-align: center; transition: visibility 1s, opacity 1s linear; _webkit_transition: visibility 1s, opacity 1s linear; } .galleryPicBox:hover div { visibility: hidden; opacity: 0; } .galleryPicBox div div { width: 100%; height: auto; line-height: 35px; background: rgba(180, 180, 180, 0.5); } .galleryPicBox div:last-child { position: absolute; bottom: 0 !important; padding: 5px 10px; line-height: 22px; } .galleryPicBox .imgStyle { max-height: 420px; max-width: 100%; image-orientation: from-image; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div id="picBack" runat="server" class="galleryPicBox"> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="imgStyle" /> <div id="divPicDetail" runat="server"> <div id="divPicTitle" runat="server">pic Title</div> <div id="divPicContent" runat="server">picContent</div> </div> </div>