使图像叠加更具响应性？

Question

有没有什么办法让这个覆盖更具响应性？如何使覆盖图不会切断文字，或在分辨率变化时进入图像之外？

为了进一步阐明：我在一行中使用了三个图像，每个使用的W3CSS框架都有三个图像，下面有三个图像等等。每个图像都有一个覆盖文本链接指向其他页面如下例所示。我唯一的问题是回应。我希望图像和叠加层能够响应屏幕尺寸的变化和分辨率。

谢谢！

.container { 
 
\t position: relative; 
 
\t width: 50%; 
 
} 
 

 
.image { 
 
\t display: block; 
 
\t width: 100%; 
 
\t height: auto; 
 
} 
 

 
.overlay { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t opacity: 0; 
 
\t transition: .5s ease; 
 
\t background-color: #008CBA; 
 
} 
 

 
.container:hover .overlay { 
 
\t opacity: 1; 
 
} 
 

 
.text { 
 
\t color: white; 
 
\t font-size: 15px; 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%, -50%); 
 
\t -ms-transform: translate(-50%, -50%); 
 
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/> 
 

 
<div class="w3-row-padding"> 
 
    <div class="w3-third w3-container w3-margin-bottom"> 
 
     <div class="container"> 
 
      <img src="https://www.google.com/images/branding/product/ico/googleg_lodp.ico" alt="Google" style="height:300px;width:400px" class="w3-hover-opacity"> 
 
      <div class="overlay"> 
 
       <div class="text"> 
 
        <a href="https://www.google.com">Google Sample1</a><br> 
 
        <a href="https://www.google.com">GoogleSample2</a><br> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="w3-container w3-white" style="height:50px;width:400px"> 
 
      <h3>Example 1</h3> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

要确保，你image是相同的宽度为父母，你最好使用不仅width = 100%属性，但min-width = 100%和max-width = 100%了。如果你想保留image的尺寸，你也应该指向height = auto，但在你的情况下它应该是height = auto !important。而对于在overlay打破长时间的话，我已经添加了以下规则：

overflow-wrap: break-word; 
word-wrap: break-word; 
word-break: break-all; 
word-break: break-word; 
hyphens: auto; 

这里的工作片段：

.container { 
 
    position: relative; 
 
    width: 50%; 
 
} 
 

 
.image { 
 
    display: block; 
 
    width: 100%; 
 
    min-width: 100%; 
 
    max-width: 100%; 
 
    height: auto !important; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    opacity: 0; 
 
    transition: .5s ease; 
 
    background-color: #008CBA; 
 
    
 
    overflow-wrap: break-word; 
 
    word-wrap: break-word; 
 
    word-break: break-all; 
 
    word-break: break-word; 
 
    hyphens: auto; 
 
} 
 

 
.container:hover .overlay { 
 
    opacity: 1; 
 
} 
 

 
.text { 
 
    color: white; 
 
    font-size: 15px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
}

<div class="w3-row-padding"> 
 
    <div class="w3-third w3-container w3-margin-bottom"> 
 
    <div class="container"> 
 
     <img src="https://www.google.com/images/branding/product/ico/googleg_lodp.ico" alt="Google" style="height:300px;width:400px" class="w3-hover-opacity image"></a> 
 
     <div class="overlay"> 
 
     <div class="text"> 
 
      <a href="https://www.google.com">Google Sample1</a><br> 
 
      <a href="https://www.google.com">GoogleSample2</a><br> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="w3-container w3-white" style="height:50px;width:400px"> 
 
     <h3>Example 1</h3> 
 
    </div> 
 
</div>

Answer 2

背景尺寸：封面是你的朋友，当它涉及到响应式图像。以图像为背景，封面将自动定位以适应宽度/高度，并将调整为不适合的另一个方向，以保持比例。这样图像看起来像它一直保持相同的大小，但它的响应速度并不会变形。

.container { 
 
position: relative; 
 
width: 0%; 
 
} 
 
.w3-third{ 
 
background-image:url('http://www.fillmurray.com/200/300'); 
 
background-size:cover; 
 
background-position:center center; 
 
    height:300px; 
 
    width:33.333%; 
 
    float:left; 
 
    display:block; 
 
    position:relative; 
 
} 
 
.overlay { 
 
position: absolute; 
 
top: 0; 
 
bottom: 0; 
 
left: 0; 
 
right: 0; 
 
opacity: 0; 
 
transition: .5s ease; 
 
background-color: #008CBA; 
 
} 
 

 
.w3-container:hover .overlay { 
 
opacity: 1; 
 
} 
 

 
.text { 
 
color: white; 
 
font-size: 15px; 
 
position: absolute; 
 
top: 50%; 
 
left: 50%; 
 
transform: translate(-50%, -50%); 
 
-ms-transform: translate(-50%, -50%); 
 
}

<div class="w3-row-padding"> 
 
    <div class="w3-third w3-container w3-margin-bottom"> 
 
    <div class="overlay"> 
 
     <div class="text"> 
 
     <a href="https://www.google.com">Google Sample1</a><br> 
 
     <a href="https://www.google.com">Google Sample2</a><br> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="w3-third w3-container w3-margin-bottom"> 
 
    <div class="overlay"> 
 
     <div class="text"> 
 
     <a href="https://www.google.com">Google Sample1</a><br> 
 
     <a href="https://www.google.com">Google Sample2</a><br> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="w3-third w3-container w3-margin-bottom"> 
 
    <div class="overlay"> 
 
     <div class="text"> 
 
     <a href="https://www.google.com">Google Sample1</a><br> 
 
     <a href="https://www.google.com">Google Sample2</a><br> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>