jquery - 如何设置div和图像的相同宽度

Question

我想创建一个响应式网站，其中我使用了完整的图像，当我将鼠标放在图像上时，它会出现一个与图像宽度相同的平面颜色 div。现在我用固定宽度做了这个，但我想做响应，即如果我重新调整浏览器的大小或不同的分辨率，图像会改变它的尺寸，但 div 元素不会。

代码是这样的

<div id="thumbs-cont">
  <div class="thumbnails">
  <img src="images/armin_vit_secrethandshake-325x325.jpg" /> </div>
  <div class="thumb-name"> aaa aa</div>
  <div class="thumb-desc"> ab ab ab</div>
  <div class="thumbnails">
  <img src="images/armin_vit_secrethandshake-325x325.jpg" /> </div>
  <div class="thumb-name"> aaa aa</div>
  <div class="thumb-desc"> ab ab ab</div>
  <div class="thumbnails">
  <img src="images/armin_vit_secrethandshake-325x325.jpg" /> </div>
  <div class="thumb-name"> aaa aa</div>
  <div class="thumb-desc"> ab ab ab</div>
</div> 

Answer 1

我认为使用 flexbox 可以解决问题。

读这个:

http://learnlayout.com/flexbox.html