如何設置圖像大小的div寬度

我有ID =「picBox」的圖像標籤和兩個包含圖片標題和圖片內容的div。我希望「picBox」的寬度與圖片標籤相同。但我做不到。我能做些什麼來解決它？謝謝。如何設置圖像大小的div寬度

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>

來源

2017-07-25 jh_6990

您是否嘗試過加入'寬度：汽車; display：inline-block;'to'.galleryPicBox'？ – UncaughtTypeError

謝謝。用這種風格解決了這個問題。 –

刪除填充：5px的10px的;來自你的風采圖所示

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

來源

2017-07-25 09:44:12 Dexter

您可以使用jQuery它這樣

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>

來源

2017-07-25 09:49:10

如何設置圖像大小的div寬度

回答

相關問題