it-swarm.dev

Zmień img src w responsywnych projektach?

Zamierzam zakodować responsywny układ, który prawdopodobnie będzie zawierał trzy różne „stany”.

Dziwaczna część to taka część tekstu, na przykład elementy menu będą obrazami - nie mój pomysł i to nic, co mogę zmienić, boję się.

Ponieważ obrazy różnią się nieznacznie, poza rozmiarem, dla każdego stanu (na przykład w najmniejszym stanie menu staje się pływającymi przyciskami zamiast zwykłego nagłówka), będę musiał przełączać obrazy zamiast skalować te same.

Gdyby nie to, prawdopodobnie wybrałbym „adaptive-images.com”.

Potrzebuję więc trochę informacji na temat najlepszych rozwiązań w tym zakresie.

Co mogłem wymyślić:

  • Ładowanie obrazów jako tła - jest trochę brudne.

  • Wstaw obie wersje i przełącz właściwość wyświetlania css - bardzo brudna!

  • Napisz JavaScript, który ustawia wszystkie linki img - czuje się trochę przesadzony?

Czy ktoś siedzi na dobrym rozwiązaniu? :)

16
jonas

Jeśli jest to tylko kilka obrazów (i są zoptymalizowane), ukrywanie ich za pomocą CSS nie stanowi problemu. Jeśli to dużo, spójrz na Odpowiedź JS która zmieni zmienną src dla Ciebie. Spróbuj tego:

<body data-responsejs='{ "create": [
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] }
]}'>

<img src="small.png" data-min-width-481="medium.png" alt="example">

Czytaj ten artykuł też.

Aktualizacja - dodatkowy przykład:

<body data-responsejs='{ "create": [
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] }
  , { "prop": "device-pixel-ratio", "breakpoints": [0, 1, 1.5, 2] }
]}'>

<img src="small.png" data-device-pixel-ratio-1.5="medium.png" alt="example">
14
ryanve

Inna opcja. Nie potrzebujesz skryptów, tylko CSS.

HTML

<div id="mydiv">
    <img src="picture.png" class="image_full">
    <img src="picture_mobile.png"  class="image_mobile">
</div>

CSS

.image_full{
   display:block;
  }

 .image_mobile{
  display:none;
 }

@media (max-width: 640px) and (min-width: 320px){
  .image_full{
   display:none;
  }

  .image_mobile{
   display:block;
  }
}
27

Większość dzisiejszych przeglądarek obsługuje znacznikipicture.

<picture>
    <source media="(min-width: 1200px)" srcset="/img/desktop-size.png">
    <source media="(min-width: 768px)" srcset="/img/medium-size.png">
    <img src="/img/mobile-size.png"/>
</picture>
5
Anrijs Vītoliņš

Jestem fanem trzeciego wyboru, ponieważ nie pozwala ładować wielu obrazów i oszczędza przepustowość.

Ze względu na projekt mobilny najpierw ładuję małe obrazy w ten sposób:

<div id="mydiv">
    <img src="myphoto1_normal.jpeg" width="24" height="24" alt="myphoto1"/>
    <img src="myphoto2_normal.jpeg" width="24" height="24" alt="myphoto2"/>
</div>

Następnie po załadowaniu dokumentu uruchamiam ten skrypt:

function resizeImages() {
    var width = window.innerWidth || document.documentElement.clientWidth;
    $("#mydiv img").each(function() {
        var oldSrc = $(this).attr('src');
        if (width >= 768) {
            var newSrc = oldSrc.replace('_normal.','_bigger.');
            var newWidth = 100;  var newHeight = 100;
        } else if ( width >= 480 ) {
            var newSrc = oldSrc.replace('_normal.','_big.');
            var newWidth = 50;  var newHeight = 50;
        }
        $(this).attr('src',newSrc);
        $(this).attr('width',newWidth);
        $(this).attr('height',newHeight);
    });
}

Jeśli szerokość ekranu jest duża, za pomocą tego skryptu zmieniam małe obrazy na większe. Działa szybko na komputerach stacjonarnych. I nie działa na smartfonach.

2
trante

To, co bym zrobił, to:
używaj obrazów jako tła każdego elementu li
utwórz Sprite z linkami (obrazkami) we wszystkich rozmiarach:

___ ___ ___ ___
__ __ __ __
_ _ _ _

Następnie, używając @media, np.:\t.

@media only screen and (max-width : 480px) {
 /* here I would make my li smaller */
 /* here I would just change the li background position*/
}

Obrazy „Sprite” będą już załadowane w przeglądarce, a przejście nastąpi naprawdę płynnie i szybko.

1
Roko C. Buljan