0

我不是一个经常问的人，但我似乎无法使用 CSS/CSS3 完成这项工作。

请注意，即使使用不太受支持的 CSS3 样式（例如调整大小），我也会很高兴。

它的jsFiddle。

当前不可调整大小的代码：

HTML：

<div id="boxes">
  <a id="about1" class="aboutbox" href="/property-for-sale">
  &#160;</a>
  <a id="about2" class="aboutbox" href="/why-cyprus">&#160;</a>
  <a id="about3" class="aboutbox" href="/why-zantis">&#160;</a>
  <span class="stretch">&#160;</span>
</div>

CSS：

#boxes {
    padding: 70px 0 70px 0;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
.aboutbox {
    padding: 0;
    margin: 0;
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 320px;
    height: 225px;
    vertical-align: top;
    text-align: left;
    background-size: auto auto;
}
#about1 {
    background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about2 {
    background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about3 {
    background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about1:hover {
    background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
#about2:hover {
    background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
#about3:hover {
    background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}

如果您调整 html 面板的大小，您会看到它们按预期浮动。我正在使用一种通用方法将它们沿父 div 平均分配。我还使用 CSS 来创建具有悬停效果的图像按钮（不要询问图形的性质..）。

我想让这些在调整 html 面板大小时相应地调整大小；即让实际按钮按比例缩小并保持在一行中。

我有一个使用 jQuery 的有效解决方案，但是没有它就花了我的时间得到它，却一无所获。有任何想法吗？

蒂亚。

4

4 回答 4

2

纵横比

这里的主要问题是保持图像的相对尺寸（纵横比）。不使用 JavaScript 或 jQuery 的几种潜在方法如下：

  1. 使用前景图像（img标签）。
  2. 用于calc()使图像包装的高度为其宽度的固定百分比。

我运气不太好calc()。我得到的最接近的是试图使高度成为视口宽度的固定百分比（使用vw单位）。这似乎不是很有希望。我不能完全排除可能使用的解决方案calc()，但到目前为止，唯一明显的用于保持纵横比的 CSS 解决方案需要使用前景图像。

更新的演示

前景图像的悬停状态

使用前景图像实现悬停效果相当简单。将一对图像添加到每个图像包装器，并将:hover伪类应用于包装器以根据需要打开或关闭每个图像。

<a class="aboutbox" ...>
    <img class="off" src="..." alt=""/>
    <img class="on"  src="..." alt=""/>
</a>
...
.aboutbox:hover img.off { display: none; }
.aboutbox       img.on  { display: none; }
.aboutbox:hover img.on  { display: inline-block; }

对齐图像

证明图像最棘手的部分是图像包装器（在 HTML 源代码中）之间需要有一些空格，以便证明有机会工作，原因与句子中的单词之间需要有空格的原因相同它们（否则，它们将被视为一个单词）。

但是inline-blockHTML 源代码中元素之间的空白会导致在元素之间添加 3-4px 的水平间距（没有可用的 CSS 解决方案来避免它，这是真正跨浏览器和安全的）。额外的空间，虽然是证明工作所必需的，但在视觉上很可能是不需要的，并且在某些情况下可能会阻止所有图像适合同一行。

这是一个带有粗略解决方案的初始演示：将每个图像的宽度限制为 31%，以便为图像包装器之间的空白留出足够的空间（在大多数屏幕尺寸上）。

对齐图像的另一个问题是，与文本一样，对齐图像仅在内容跨越至少 2 行时才有效。一种解决方法是span在内容的末尾添加一个带有display:inline-block和的标签width:90%。最初的演示演示了这一点。

@media 查询

值得注意的是，仅当屏幕足够宽以允许图像之间有额外空间时才需要对齐。@media查询可用于仅在大屏幕上应用理由。在小屏幕上，图像包装器可以浮动，这样它们之间就没有额外的空间。

使用@media 查询更新了演示

于 2013-05-03T18:35:23.633 回答
1

一种解决方案是用实际图像替换背景图像。并使用 css 来控制显示什么图像，并根据包含的元素调整大小。因此，您将每个链接包装在一个 div 中，该 div 会根据您的boxes容器重新调整大小。使用 css，您可以使用content:选择器设置图像 url。

http://jsfiddle.net/CPNbS/6/

您生成的 html 看起来像：

<div id="boxes">
    <div class="link" id="about1">
        <a class="aboutbox" href="/property-for-sale"><img /></a>
    </div>
    <div class="link" id="about2">
        <a class="aboutbox" href="/why-cyprus"><img /></a>
    </div>
    <div class="link" id="about3">
        <a class="aboutbox" href="/why-zantis"><img /></a>
    </div>
</div>

和CSS：

.link{width:30%;height:100%;border:1px solid green;display: inline-block;
    *display: inline;
    zoom: 1;}

.link a{padding: 0;
    margin: 0;
    display:block;
    width: 100%;
    height:100%;
    vertical-align: top;
    text-align: left;
    background-size: auto auto;}

.link a img{max-width:100%;}

#about1 a img{
    content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about2 a img{
    content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about3 a img{
    content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about1:hover a img,#about2:hover a img,#about3:hover a img{
content:url("http://blogs.mathworks.com/pick/files/zebrainpastelfield.png");

}

您还可以通过包含媒体查询来使用响应式设计技术。但这更多的是针对不同的设备而不是重新调整大小，因此看起来并不“流畅”。

希望这可以帮助...

于 2013-05-03T02:23:08.097 回答
1

要在设置背景图像时执行此操作，您必须摆脱每个项目的宽度设置，并使用 background-size: 100% 100%; 调整背景图像的大小；要保持 .aboutboxes 的高宽比例，请在此处使用固有比率方法和基于百分比的 padding-bottom。更多信息：http: //alistapart.com/article/creating-intrinsic-ratios-for-video

.aboutbox {
    position: relative;
    padding-bottom: 70.3125%;
    display: block;
    width: auto;
    height: 0;
    background-size: 100% 100% !important;
}

如果您愿意，可以在包装器上包含一个最大宽度或填充，以限制它们伸展的距离。

在这里更新了你的小提琴：http: //jsfiddle.net/carasin/s4pUe/11/

请注意一些有限的 IE 对背景大小的支持： http: //caniuse.com/#feat=background-img-opts

于 2013-05-03T17:52:07.917 回答
-1 
#boxes {
 white-space: nowrap;
}
boxes a{
 display:inline-block;
 width: 33%;
 background-size: cover;  
}

但我宁愿使用 img 标签见http://jsfiddle.net/Vicky_007/GZMvT/14/

你也可以模拟表：

#boxes {
  display: table;
  width: 100%;
  table-layout:fixed;
}
#boxes a{
  display:table-cell;
  background-size: cover;
}
于 2013-04-25T18:37:37.910 回答