使覆盖容器的大小与图像内部相同。

Question

这里有一些图片。在这个例子中，它的宽度是320像素，高度是200像素。覆盖层与图片的尺寸很好地协调：

.overlay-content {
  width: 320px;
  height: 200px;
  ...
}

但是我无法设置图像的声明，比如

img {
  ...
}

有没有一种方法可以在不知道 .overlay-content 的宽度和高度以及不对 <img> 设置声明的情况下完成此操作？

以下是一个 JSFiddle，以及相应的示例：

img {
  /* You can't do anything here */
}
.overlay {
  position: relative;
  margin: 50px;
}
.overlay-content {
  position: absolute;
  /* This you don't know */
  width: 320px;
  /* This you don't know */
  height: 200px;
  top: 0;
  background: grey;
  opacity: 0;
  transition: opacity .3s ease;
}
.overlay-content div {
  position: absolute;
  height: 100%;
  width: 0%;
  overflow: hidden;
  right: 0;
  background: orange;
  transition: width .3s ease-in-out;
}
.overlay-content div ul {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.overlay-content div ul li {
  position: relative;
  height: 33.3333%;
  width: 0%;
  text-align: center;
  overflow: hidden;
  transition-property: width;
  transition-delay: .2s;
  transition-duration: .5s;
  transition-timing-function: ease;
}
.overlay-content div ul li span,
.overlay-content div ul li a {
  position: absolute;
  display: block;
  width: 100%;
  top: 50%;
  margin-top: -25px;
  font-size: 22px;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  color: yellow;
}
.overlay:hover > .overlay-content {
  opacity: 1;
}
.overlay:hover > .overlay-content div {
  width: 50%;
}
.overlay:hover > .overlay-content div ul li {
  width: 100%;
}

<div class="overlay">
  <img src="http://placehold.it/320x200" />
  <div class="overlay-content">
    <div>
      <ul>
        <li><a href="#">First</a>
        </li>
        <li><span>Second</span>
        </li>
        <li><span>Third</span>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="overlay">
  <img src="http://placehold.it/320x200" />
  <div class="overlay-content">
    <div>
      <ul>
        <li><a href="#">First</a>
        </li>
        <li><span>Second</span>
        </li>
        <li><span>Third</span>
        </li>
      </ul>
    </div>
  </div>
</div>

- user3589620

Answer 1

您可以将覆盖层设置为display:inline-block;或display:table;，这样它的大小将与图像相同，因为.overlay-content被设置为绝对定位，它不在正常内容流中。

.overlay {
  position: relative;
  display: inline-block;
  ...
}

并将覆盖内容设置为：

.overlay-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  ...
}

jsFiddle

- Stickers