Resize HTML-Bild in Weebly zu verfügbaren Speicherplatz

Question

Ich erstelle eine Website mit Weebly, wo ich Bilder habe, die Links zu anderen Seiten sind. Um zu zeigen, dass die Bilder Links sind, habe ich sie als eingebetteten HTML-Code eingefügt und etwas Code verwendet, um die Deckkraft zu ändern, wenn die Maus über sie fährt. Ich habe dann einen Link dazu gesetzt.

ich den Code nicht scheinen kann, zu erhalten, um hier zu gehen, ist so hier ein jsbin of it

ich nicht sehr viel HTML wissen, so habe ich die meisten dieser von Google-Suchanfragen. Dies funktioniert, aber es wird immer nur das Bild mit seiner nativen Auflösung anzeigen, und Weebly wird der HTML-Box nur eine bestimmte Menge an Platz geben, abhängig von der Bildschirmgröße. Ich möchte, dass zwei dieser Bilder auf der Seite nebeneinander liegen und die Größe gleichmäßig angepasst wird, um den gesamten horizontalen Abstand zu füllen, wobei das gleiche Seitenverhältnis beibehalten wird. Ich habe mir angeschaut, wie man das macht (wie this), aber ich bekomme nichts davon zu arbeiten.

Answer 1

Versuchen Sie diese CSS auf Ihrem Image11. Vielleicht würde Ihr auf der Suche etwas wie dieses 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>

Answer 2

empfehle ich Ihnen in einem übergeordneten beide Bilder platzieren <div> und weiter Sie innerhalb eines <div> auch jedes Bild platzieren können. Dann style Eltern <div> zu 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>