1

每次我尝试构建响应式图像轮播时，我都必须在某些时候使用绝对定位将图像从 HTML 流中取出。

是否不可能创建一个轮播，其中当前图像是其容器的 100% 宽度，其他图像隐藏在溢出中，并且整个事物都不会脱离流动，这样任何文本都会出现在生成的 DOM 中不会完全忽略轮播并最终在图像后面的左上角处于一个时髦的位置吗？

考虑这个 HTML：

<div id="featured">
<div id="featured-title">
    Title
</div>
<div id="featured-images">
    <div class="featured-images-image">
        <img src="lib/imgs/fi-1.jpg"/>
    </div>
    <div class="featured-images-image">
        <img src="lib/imgs/fi-1.jpg"/>
    </div>
</div>
<div id="featured-content">
    <div id="featured-content-text">
        <h3>
            Title
        </h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel enim id massa suscipit vehicula non sit amet augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed nisi urna, volutpat nec justo vel, rhoncus fermentum dolor. Integer pharetra, lectus eget auctor consectetur, tellus mauris gravida eros, nec porta augue tortor ac nibh. Fusce aliquam vel risus vitae luctus. Etiam lacinia ultricies tellus, nec venenatis magna viverra eu. Etiam tincidunt nibh hendrerit tincidunt ullamcorper. Nunc non urna congue, ultrices lacus sollicitudin, pellentesque ante. Etiam mi leo, sollicitudin ac tempus a, semper eu justo. Donec eget elementum dolor. Proin non tellus facilisis, suscipit velit eu, imperdiet urna. Proin non nulla suscipit, cursus tellus eleifend, tristique justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis luctus velit et pellentesque faucibus.
        </p>
    </div>
</div>
</div>

我将如何将第一个图像的宽度设置为 100%，隐藏第二个（和任何其他）图像准备动画，同时保持在文档流中，使其下方的文本保持在轮播区域下方.

这甚至可能吗？我还没有理解 HTML 专业人士如何没有完全失去这种标记语言的情节。我知道，如果我要明确强制包含元素的宽度和高度，那么我不需要担心图像会从流中取出 - 但响应性是这里的关键。

4

1 回答 1

0

我过去使用的响应式轮播是Flexslider，它根据图像调整大小，因此可以在较小的设备上按比例缩小。这可能值得一试。

于 2013-07-31T08:03:52.837 回答