如何根据屏幕大小进行图像交换？

Question

我最近开始尝试使用 bootstrap 并在屏幕缩小时按大小缩放。如果我的图像需要至少 300 像素才能读取，但屏幕只有 250 像素宽（例如），他们必须左右滚动才能看到整个图像。在 ford.com 上，他们实际上将较大的图像换成了更小、更适合屏幕的类似图像。然后，当您将屏幕拖得更大时，它会切换回更大的图像。我假设这与某种形式的 JS 和屏幕尺寸有关。有什么想法吗？

Answer 1

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

在 CSS 中，您可以使用 媒体查询 通过 background 属性加载图片，

.image {
    background: url("image.jpg");
}
@media only screen and (max-width: 250px) {
    .image {
        background: url("alternative-image.jpg");
    }
}

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

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

阅读有关媒体查询的更多信息here。

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

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

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

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

阅读更多关于它的信息here。

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

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

阅读一些关于窗口大小属性的信息here。

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

Answer 2

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

1. 在 bootstrap V3 img-responsive 中有一个类，如果你在图像标签中添加这个类，那么当视口小于图像大小时它会自动调整大小。参考：http://getbootstrap.com/css/#images-responsive

2. 或者你可以使用图片标签的srcset属性

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