0

我正在使用 Weebly 创建一个站点，其中有指向其他页面的链接的图像。为了显示图像是链接，我将它们作为嵌入的 html 放入，并使用一些代码来更改鼠标悬停在它们上方时的不透明度。然后我放了一个链接。

我似乎无法让代码进入这里，所以这是它的 jsbin

我不太了解 HTML，所以我从谷歌搜索中获得了大部分内容。这可行，但它只会以原始分辨率显示图像，并且 Weebly 只会根据屏幕大小为 HTML 框提供一定的空间。我希望其中两个图像在网站上彼此相邻，并均匀调整大小以填充整个水平空间，保持相同的纵横比。我已经研究过如何做到这一点（例如this），但我无法让它发挥作用。

4

2 回答 2

2

在你的 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-23T17:10:15.503 回答
1

我建议您将两个图像都放在 parent<div>中，并且您还可以将每个图像放在 a<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-23T17:24:18.680 回答