将 Weebly 中的 html 图片调整为可用 space

Question

我正在使用 Weebly 创建一个站点，其中我的图像是 link 到其他页面的图像。为了显示图像是 links，我将它们嵌入 html 并使用一些代码在鼠标悬停在图像上时更改不透明度。然后我在这个周围放了一个link。

我似乎无法获得进入此处的代码，所以这里是 jsbin of it

我不太了解 HTML，所以我从 google 搜索中获得了大部分信息。这行得通，但它只会以原始分辨率显示图像，而 Weebly 只会根据屏幕尺寸为 HTML 框提供一定数量的 space。我希望这些图像中的两个在网站上彼此相邻，并均匀调整大小以填充整个水平 space，保持相同的纵横比。我已经查看了如何执行此操作（例如 this），但我无法使其正常工作。

Answer 1

在您的图片上试试这个 css11。也许你看起来像这个 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>

将 Weebly 中的 html 图片调整为可用 space

Resize html image in Weebly to available space

html

css

image

weebly