Question

我通常不会问，但我似乎无法使用CSS / CSS3完成此操作。

请注意，即使使用不太受支持的CSS3风格，我也会很高兴，比如调整大小。

当前不可复制的代码：

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的工作解决方案，但是花了我的时间在没有它的情况下得到它并且无处可去。有什么想法吗？

TIA。

Answer 1

宽高比

这里的主要问题是保持图像的相对尺寸（纵横比）。在不使用JavaScript或jQuery的情况下，有两种方法可以做到这一点：

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

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

Updated Demo

前景图像的悬停状态

使用前景图像实现悬停效果非常简单。向每个图像包装器添加一对图像，并将: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源代码中），以便有机会工作，因为句子中的单词需要他们之间有空格（否则，他们将被视为一个单词）。

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

这是一个initial demo原始解决方案：将每个图像的宽度限制为31％，以便为图像包装器之间的空白留出足够的空间（在大多数屏幕尺寸上）。

证明图像合理性的另一个问题是，与文本一样，仅当内容跨越至少2行时，对齐图像才有效。一种解决方法是在内容末尾添加span标记display:inline-block和width:90%。 initial demo证明了这一点。

@media queries

值得注意的是，仅当屏幕足够宽以允许图像之间留出额外空间时才需要进行调整。 @media个查询可用于仅在大屏幕上应用理由。在小屏幕上，图像包装器可以浮动，因此它们之间没有额外的空间。

Updated demo using @media queries

Answer 2

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

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");

}

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

希望这会有所帮助......

Answer 3

要在设置背景图像时执行此操作，您必须删除每个项目的宽度设置，并使用背景大小调整背景图像的大小：100％100％;要保持.aboutbox的高宽比例，请使用此处的固有比率方法和基于百分比的填充底部。更多信息：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

Answer 4

#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;
}

使用CSS使用背景图像调整DIV的大小

4 个答案:

宽高比

前景图像的悬停状态

对齐图像

@media queries