Как изменить имя файла изображения в HTML-коде экрана разных размеров?

Question

Как изменить имя изображения в HTML-коде экрана разных размеров?

например, я хочу сделать как

, если экран имеет максимальную ширину: 1024

<img src="sample400X400.jpg>

и если экран имеет максимальную ширину: минимальная ширина: 1900px

<img src="sample800X800.jpg>

Возможно ли это

Answer 1

Вы можете использовать простой JS-скрипт для этого:

img = document.createElement("img");
img.src = (document.body.offsetWidth < 1024) ? "sample400X400.jpg": "sample800X800.jpg";
document.body.appendChild(img);

Я поместил пример на мой сервер, вы можете посмотреть это, если хотите (вам нужно изменить размер и перезагрузить страницу, чтобыувидеть любые изменения) http://frommelt.fr/img-size/

Answer 2

Вы можете сделать это в CSS с помощью media-query или в JavaScript, обнаружив изменения ширины области просмотра ($(window).width();).

Вы можете обнаружить изменение вширина области просмотра при прослушивании onresize событий:

$(window).resize(function() {
    ...
});