1

我有一张 1772 像素的图片。此图像是可用的最大图像。原始文件已消失，因此我无法创建 5120 像素宽的图像。如果我希望能够在 iMac 的整个宽度上很好地拉伸它，那么标记和 CSS 将如何查找该图像？

最低要求：

  • 我正在使用 Bootstrap，所以它必须使用它。最好使用img-responsive内置类。我需要在div中有img-tag吗？container-fluid
  • <picture>由于涉及艺术指导，因此需要使用-element。当视口达到 767 像素或更低时，我以纵向模式显示图像。

这是我正在试验的代码：

<picture>
    <source media="(min-width: 768px)"
            srcset="/img/landscape/large.jpg 1772w,
                /img/landscape/medium.jpg 886w,
                /img/landscape/small.jpg 443w"
            sizes="100w" />

    <source srcset="/img/portrait/large.jpg 955w,
                /img/portrait/medium.jpg 640w,
                /img/portrait/small.jpg 320w"
            sizes="100vw" />

    <img src="/img/landscape/medium.jpg" alt="" />
</picture>

目前 firefox 和 Chrome 可以很好地拉伸图像，但 IE10 停止在 1772px 并在图像右侧留下空白。

如果我将图像设置img为width:100%会拉伸，但我很困惑这是不是正确的方法，因为他们在 Bootstrap 中使用max-width.

4

0 回答 0