Question

我最近开始尝试使用引导程序，并在屏幕缩小时缩放大小。如果我的图像需要至少300px才能读取，但屏幕宽度仅为250px（仅作为示例），则必须向左和向右滚动才能看到整个图像。在ford.com上，他们实际上将较大的图像交换出来，以获得更小，更适合屏幕的类似图像。然后，当您将屏幕拖得更大时，它会切换回更大的图像。我假设这与某种形式的JS和屏幕尺寸维度有关。有什么想法吗？

Answer 1

从技术上讲，您可以通过 css ， html 或 javascript 来实现您所描述的功能。

在 CSS 中，您可以使用媒体查询通过后台属性

加载图片

.image {
    display: initial;
}
.alternative-image {
    display: none;
}
@media only screen and (max-width: 250px) {
    .image {
        display: none;
    }
    .alternative-image {
        display: initial;
    }
}

或者，如果您在html文档中加载了图像，则通过显示属性。

<picture>
    <source media="(min-width: 250px)" srcset="image.jpg" />
    <img src="alternative-image.jpg" />
</picture>

详细了解媒体查询here。

在 HTML 中，您可以使用图片和源元素，

<img src="alternative-image.jpg" srcset="image.jpg 250px" />

或更简单的替代方案， srcset属性。

window.onresize = function () {
    if (window.innerWidth < 250) {
        image.setAttribute("src", "alternative-image.jpg");
    } else {
        image.setAttribute("src", "image.jpg");
    }
}

详细了解here。

最后，在 JavaScript 中，您可以使用窗口大小属性来构建一个函数，每次调整窗口大小时，为每个大小加载正确的图像< / strong>即可。

viewDidAppear

阅读一下窗口大小属性here。

PS。 NOT 直接使用这些示例，因为它们不完整和未优化。他们唯一的目的是模拟使用他们引用的资源。

Answer 2

这可以通过两种方式存档。

如果在图像标记中添加此类，则在引导程序V3 img-responsive中有一个类，然后当视口小于图像大小时，它将自动调整大小。参考：http://getbootstrap.com/css/#images-responsive
或者您可以使用图片标记的srcset属性

例如： <img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah"> 在上面的示例中，您可以在第一个参数的srcset中设置图像路径，第二个是图像宽度。在此浏览器中自动检测视口宽度，并根据它将加载图像。

如何根据屏幕尺寸进行图像交换？

2 个答案: