將Weebly的大小調整爲可用空間

我使用Weebly創建了一個站點，其中包含指向其他頁面的鏈接的圖像。爲了顯示圖像是鏈接，我將它們放入嵌入式html中，並在鼠標懸停在它們上方時使用一些代碼來更改不透明度。然後我把這個鏈接。將Weebly的大小調整爲可用空間

我似乎無法讓代碼在這裏去，所以這裏是一個jsbin of it

我不知道很多HTML，所以我得到了最本從谷歌搜索。這種方法很有效，但它只能以原始分辨率顯示圖像，而Weebly只會根據屏幕大小給HTML框留出一定的空間。我希望這些圖像中的兩個在網站上彼此相鄰，並均勻調整大小以填充整個水平空間，保持相同的高寬比。我已經看過如何做到這一點（例如this），但我無法完成任何工作。

來源

2016-09-23 BananaConsultant

在你的image11上試試這個css。也許你看起來像這樣一個LiveOnFiddle

 .two_img { 
 
    display: inline-flex; 
 
    
 
    } 
 
    
 
    .image11 { 
 
    max-width: 100%; 
 
    display: block; 
 
    margin: 0 auto; 
 
    -webkit-transition: all 0.7s ease; 
 
    transition: all 0.7s ease; 
 
    border: 1px solid red; /*only for view both image are separete */ 
 
    } 
 
    
 
    .image11:hover { 
 
    opacity: 0.6; 
 
    filter: alpha(opacity=60); 
 
    }

<div class="two_img"> 
 
<a href="link"> 
 
<img class="image11" src="http://www.w3schools.com/css/trolltunga.jpg"> 
 
</a> 
 
<a href="link"> 
 
<img class="image11" src="http://www.w3schools.com/css/trolltunga.jpg"> 
 
</a> 
 
</div>

來源

2016-09-23 17:10:15

這個偉大的工程，謝謝！ – BananaConsultant

有沒有辦法在每幅圖片之間添加一個邊距？ CSS中的邊距只是高於和低於 – BananaConsultant

是的，您可以立即使用{padding-left：5px; } –

我會建議你把父母<div>內兩個圖像，並且還可以將每個圖像的<div>內爲好。然後風格父母<div>到100％。

.image11 { 
 
    float: left; 
 
} 
 

 
.image12, 
 
.image11 { 
 
    width: 50%; 
 
    display: block; 
 
    margin: 0 auto; 
 
    height: auto; 
 
    -webkit-transition: all 0.7s ease; 
 
      transition: all 0.7s ease; 
 
} 
 
.image { 
 
    //CODE HERE FOR MARGIN/PADDING OF IMAGES 
 
}

<div class="imagesAcross"> 
 

 
    <div class="image"> 
 
     <a href="link"> 
 
      <img class="image11" src="http://www.w3schools.com/css/trolltunga.jpg"> 
 
     </a> 
 

 
    </div> 
 

 
    <div class="image"> 
 
     <a href="link"> 
 
      <img class="image12" src="http://www.w3schools.com/css/trolltunga.jpg"> 
 
     </a> 
 
    </div> 
 

 
</div>

來源

2016-09-23 17:24:18 Illdapt

我用了上面的答案，但我確定你的作品也是。謝謝！ – BananaConsultant

將Weebly的大小調整爲可用空間

回答

相關問題