• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Powiększenie wszystkich obrazków w rzędzie, powiększając jeden obrazek za pomocą myszki

VPS Starter Arubacloud
0 głosów
74 wizyt
pytanie zadane 17 listopada 2020 w JavaScript przez trzczy Gaduła (3,280 p.)
edycja 17 listopada 2020 przez trzczy

Celem tego projektu jest, aby po przeskalowaniu za pomocą myszki jednego obrazka, pozostąłe obrazki również się zeskalowały. Zasadą dla wszyskich obrazków jest zachowanie proporcji obrazka. Doszedłęm do momentu, że wszystkie obrazki automatycznie uzyskują właściwą wysokość, ale niestety ich szerokość pozostaje niezmieniona. Poproszę o jakieś wskazówki i  pomoc. Oto link do codepen i kod. Z góry dziękuję

demo

$(".res").resizable({
    aspectRatio: true,
    ghost: true,
    stop: function( event, ui) {
  height=ui.size.height;
  $(".ui-wrapper, .member").height(height + "px");
}
});
* {
  margin: 0;
  padding: 0;
}
.outer {
  border: red dashed 2px;
  position: relative;
}
.ui-wrapper, .member {
  display: inline-block;
}
.member, .ui-wrapper {
  width:auto;
}
<div class="outer">
  <img class="res image member" src="https://via.placeholder.com/150x50" alt="" />
  <img class="res image member" src="https://via.placeholder.com/100x50" alt="" />
  <img class="res image member" src="https://via.placeholder.com/100x50" alt="" />
</div>

 

1 odpowiedź

0 głosów
odpowiedź 17 listopada 2020 przez trzczy Gaduła (3,280 p.)
* {
  margin: 0;
  padding: 0;
}
.outer {
  border: red dashed 2px;
}
.ui-wrapper, .member {
  display: inline-block;
  vertical-align: top;
}
$(".res").resizable({
    aspectRatio: true,
    // ghost: true,
    stop: function(event, ui) {
      height=ui.size.height;
    // $(".ui-wrapper, .member").height(height + "px");
      $(".ui-wrapper, .member").each(function() {
            ratio = height / $(this).height();
        console.log(parseInt($(this).height() * ratio, 10));
            $(this).css("height", parseInt($(this).height() * ratio, 10));
            $(this).css("width", parseInt($(this).width() * ratio, 10));
      });
    }
});

demo

Podobne pytania

0 głosów
2 odpowiedzi 126 wizyt
pytanie zadane 25 marca 2017 w JavaScript przez Mimoid Użytkownik (760 p.)
0 głosów
0 odpowiedzi 199 wizyt
0 głosów
4 odpowiedzi 610 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...