Question

我正在尝试创建a site with a set of images，可以通过垂直滚动页面或单击使用锚标记链接到集合中下一个图像的按钮来查看。

图像在容器内垂直和水平居中，响应浏览器窗口的大小。

<a id="1">

    <table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
    <tr valign="middle"><td align="center">

        <img src="image.png">

    </td></tr>
    <tr><td>

        <a href="#2">Down</a>

    </td></tr>
    </table>

</a>

我知道没有其他方法可以实现这一点，但使用表虽然我知道它是非常糟糕的标记。

我还发现该网站在Firefox 16.0.2中正确呈现，但在Safari 5.0.6中没有呈现，其中在集合中的第二个图像后，表格看起来呈指数级增长。

如何对此网站进行编码以获得更好的可访问性和正确的标记？

Answer 1

我可能不用太多黑客的方式就可以将每个图像放在一个div中，根据css设置一些尺寸，然后使用javascript进行相应的调整。以下是HTML示例：

div class="item">
    <img src="http://www.focus-itoutsourcing.com/wp-content/uploads/2013/10/Software-testing-trends-2013.jpg" />
</div>
<div class="item">
    <img src="http://www.focus-itoutsourcing.com/wp-content/uploads/2013/10/Software-testing-trends-2013.jpg" />
</div>

示例CSS：

html {height:100%;}
body {height:100%;}

div.item {
    width:100%;
    height:100%;
    text-align:center;
}

div.item > img {
    max-height:100%;
    max-width:100%;
}

最后，jquery只是在调整大小和开始时重新调整大小。

$(document).ready(function(){
    //Setup function for sizing.
    var win = $(window), body = $('body');
    var els = $('div.item');
    function DoResize() {
        var height = win.height(), 
        width = body.width();
        els.each(function(i,el){
            var ele = $(el);
            ele.height(height).width(width);
            var img = ele.find('img');
            var difference = (height - img.height())/2.0;
            img.css('margin-top',difference+'px');
        });
    }

    DoResize();
    $(window).on('resize', DoResize);
});

我为您设置jsfiddle以查看其效果。它还重新调整了窗口的大小。根据{{3}}，它应该适用于大多数浏览器，甚至IE7。

更新

要包含字幕，您可以执行各种操作。最简单的方法是为每个项目添加相对定位，然后对每个要对每个图像定位的元素进行绝对定位。

您可以或多或少地执行html：

<div class="item">
    <img src="http://www.focus-itoutsourcing.com/wp-content/uploads/2013/10/Software-testing-trends-2013.jpg" />
    <div class="caption">
        Caption for Item 1
    </div>
    <div class="link">
        <a href="javascript:alert('Woo #1');">Item link</a>
    </div>
</div>

然后样式将只有父div中其他类的更新。

我在这里更新了jsfiddle，向您展示了一些可以做的事情：caniuse.com

再次更新：

将以下脚本标记添加到您的页面：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

在调整大小脚本之前。

Answer 2

Damn Miltox也打败了我。但他的表现更好。只是说野生动物园很奇怪的原因是你有多个桌子设置在100％高度，每个桌子堆叠在一起，所以他们加起来，你应该有一个大桌子。毫无疑问，Miltox的答案将会解决这个问题。

替换响应式表以获得更好的标记和可访问性

2 个答案:

更新

再次更新：