Изменение размера html изображения в Weebly до доступного пространства

Question

Я создаю сайт, используя Weebly, где у меня есть изображения, которые являются ссылками на другие страницы. Чтобы показать, что изображения являются ссылками, я поместил их в качестве встроенного html и использовал некоторый код для изменения непрозрачности, когда мышь витает над ними. Затем я установил ссылку.

я не могу показаться, чтобы получить код, чтобы идти сюда, так вот jsbin of it

Я не знаю, очень много HTML, так что я получил большую часть этого от Google поисков. Это работает, но он будет отображать изображение только в его собственном разрешении, а Weebly будет давать только поле HTML в определенном объеме в зависимости от размера экрана. Я хочу, чтобы два из этих изображений были рядом друг с другом на сайте и равномерно изменяли размер, чтобы заполнить все горизонтальное пространство, поддерживая одинаковое соотношение сторон. Я посмотрел, как это сделать (например, this), но я не могу заставить его работать.

Answer 1

Попробуйте этот css на своем изображении11. Может быть, ваш выглядящий как этот 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

Я рекомендую поместить оба изображения в пределах родительского <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>