如何设置图像大小的div宽度

Question

我有div = id =“picBox”的图像标记和两个包含图片标题和图片内容的div。我希望“picBox”宽度与图片标签相同。 但我不能这样做。 我能做些什么来解决它？ 感谢。

CSS代码：

.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

从您的风格中删除填充：5px 10px;

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

＆＃13;

＆＃13;

.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: 

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以像这样使用jquery

{  
 "size":0,
 "aggs":{  
     "metrics_by_day":{  
     "date_histogram":{  
        "field":"post_created_time",
        "interval":"day",
        "format" : "yyyy-MM-dd"
     }
   }
 }
}

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