使圖像疊加更具響應性？

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>