オーバーレイコンテナのサイズを画像内と同じにします

Question

画像があります。この例では、width: 320px;とheight: 200px;です。 オーバーレイは、と正常に動作している：

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

しかし、私は

img { 
    ... 
} 

のような画像のセット宣言は、そこには、幅と知らずにそれを行うための方法であることはできません高さは.overlay-contentで、宣言は<img>に設定されていませんか？その大きさは画像と同じになるようにあなたは、display:inline-block;又はdisplay:table;としてオーバーレイを設定することができる

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>

Answer 1

：ここ

はJSFiddle、及び対応する実施例であります、.overlay-contentが絶対位置として設定されているため、通常のコンテンツフローから外れています。

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

とオーバーレイのコンテンツとして：

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

jsFiddle