javascript - CSS/JS 调整图形大小以适合图像大小

Question

我对过渡进行了一些实验，想在 :hover 上显示图像的标题。这是我现在得到的:
(我试图用图像的大小调整图形本身的大小)

//Resize figure to image size
$(document).ready(function() {
  $("figure>img").load(function() {
    $(this).parent().width($(this).width());
  });
});

figure {
  display: table;
  position: relative;
  overflow: hidden;
}
figcaption {
  position: absolute;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 10px 20px;
  opacity: 0;
  /* unvisible to fade in later */
  bottom: 0;
  left: 0;
  display: none;
  /* unvisible to fade in later */
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
}
figure:hover figcaption {
  opacity: 1;
  /* visible */
  left: 0;
  display: inline-block;
  /* visible */
}
.img-middle {
  height: 60%;
  width: 60%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
  <img class="img-middle" src="img/test.png" alt="" width="700" height="500"></img>
  <figcaption>This is a cool caption</figcaption>
</figure>

图形从未调整过大小。
现在的问题是图形的宽度不知何故为 100%，因此 :hover 效果也会在图像旁边的某处触发。我不想手动设置图形的大小。当我尝试 figure>img:hover figcaption {/* do stuff */}(仅在图像悬停时触发标题淡入)时，它不知何故不再起作用。
所以因为这对我不起作用，所以我尝试根据 child 的大小调整 parent 的大小......

Answer 1

这是你想要的吗？

figcaption {
  position: absolute;
  display: block;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  height: 100%;
  overflow: hidden;
  width: 0;
  /* unvisible to fade in later */
  top: 0;
  left: 0;
  /* unvisible to fade in later */
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  text-overflow: ellipsis;
  white-space: nowrap;
}
figure {
  display: table;
  position: relative;
  overflow: hidden;
  border: 1px solid;
  /**
  * only an example
  */
  width: 500px;
  height: 100px;
}
figure img {
  display: block;
  width: 100%%;
  height: 100%;
}
figure > .image-container {
  width: auto;
  display: block;
  width: 80%;
  margin: 0 auto;
}
figure > .image-container:hover {
  width: 100%;
}
figure > .image-container:hover figcaption {
  padding: 10px 20px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
  <div class="image-container">
    <img class="img-middle" src="http://lorempixel.com/400/200/" alt="" width="100%" />
    <figcaption>This is a cool caption</figcaption>
  </div>
</figure>