이미지 + 텍스트 DIV와 화면 비율을 유지

Question

나는 다음과 같은 요구 사항이

:

• 나는 내 이미지 + 텍스트로 div이 필요합니다.
• div은 가로 세로 비율을 유지해야하며 divs 내부의 모든 이미지는 동일한 높이를 가져야합니다 (이렇게하려면 다음을 사용합니다 : Maintain the aspect ratio of a div with CSS).
• div의 이미지는 부모 div을 완전히 채우기 위해 늘려야합니다. 그 안에 텍스트를 가지고 있기 때문에,
  • 당신이 볼 수 있듯이, 왼쪽 div이 높다 :

    I prepared a jsfiddle

나는 두 가지 문제가 있습니다. 크기가 변경 될 때 divs의 종횡비를 유지하는 데 사용되는 padding-bottom: 150% - 접근과 충돌합니다. 그러나 목표는 내부에있는 텍스트의 수와 크기에 관계없이 모두 divs의 크기가 동일하다는 것입니다.
• 또한 div를 가리키면 배경 이미지의 불투명도를 변경하고 싶습니다. 그러나 텍스트 불투명도가 변경되어서는 안됩니다. 나는 이것이 JS를 통해서만 달성 될 수 있다고 생각한다. 방법?

Answer 1

position:absolute

.inner-text{ 
    position:absolute; 
    width:100%; 
    height:100%; 
    text-align:center; 
    z-index:1; 
} 
.event:hover .inner-text{ 
    background:rgba(255,255,255,0.5) 
} 


<div class="bit-3"> 
    <div class="event" style="background-image: url(https://container25.at/wpdev/wp-content/uploads/2016/06/test.jpg)"> 
    <div class="inner-text"> 
     Text inner 
    </div> 
    </div> 
</div> 

업데이트 바이올린 코드로 텍스트를 추가 https://jsfiddle.net/f5uxz4mx/8/

Answer 2

시도 추가 배경 - 크기 : 포함, 높이 : 0;

.bit-3 { 
 
    width: 33.33333%; 
 
    float: left; 
 
    max-resolution: res;-left: 20px; 
 
    
 
    
 
} 
 

 
.event { 
 
    margin: 0 auto; 
 
    position: relative; 
 
    border: 2px solid #000000; 
 
    padding-bottom: 150%; 
 
    background-size: cover; 
 
}

<div class="bit-3"> 
 
    <div class="event" style="background-image: url(https://container25.at/wpdev/wp-content/uploads/2016/06/test.jpg);background-size: contain;height: 0;">asdf text 
 
    </div> 
 
</div> 
 
<div class="bit-3"> 
 
    <div class="event" style="background-image: url(https://container25.at/wpdev/wp-content/uploads/2016/06/20170715_mareados.jpg)"> 
 
    </div> 
 
</div>