Forum PHP.pl > [JavaScript][CSS]Cropper.js, wypełnianie diva wycentrowanym obrazkiem

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][CSS]Cropper.js, wypełnianie diva wycentrowanym obrazkiem

stellatus

8.07.2021, 13:50:53

Zmodyfikowałem przykład z biblioteki cropper.js (https://fengyuanchen.github.io/cropperjs/).

Wersja oryginalna przykładu:https://fengyuanchen.github.io/cropperjs/examples/fixed-crop-box.html

Wersja moja: https://codepen.io/reti/pen/ExmyyaX

Chciałbym, aby te zdjęcia, po załadowaniu wypełniły swoje divy, ale tak żeby były wycentrowane wertykalnie i horyzontalnie, przy czym:
- jeżeli obraz ma orientację horyzontalną, to jego wysokość nie może być większa od diva
- jeżeli obraz ma orientację wertykalną, to jego szerokość nie może być większa od diva.

Dokładnie tak jak tutaj: https://ibb.co/Twqxy2h

Jak to zrobić? Próbuję na różne sposoby i już skończyły mi się pomysły.

Problem dokładnie taki sam jak w tym poście: Temat: JavaScriptCSSwypelnianie diva wycentrowanym obrazkiem tylko biblioteka inna.

trueblue

8.07.2021, 14:14:19

Próbowałeś ustawić max-width oraz max-height:100% dla .cropper-container img ?
Trzeba nadpisać wartości, które są w cropper.css dla tego selektora.

LowiczakPL

9.07.2021, 07:23:48

dla lwa masz

[HTML] pobierz, plaintext 
width: 300px;
height: 225px;
transform: translateY(37.5px);
[HTML] pobierz, plaintext

jeśli podmienisz na poniższy kod będziesz miał docelowy efekt

[HTML] pobierz, plaintext 
transform: translateX(-50%);
margin-left: 50%;
width: auto;
[HTML] pobierz, plaintext

stellatus

9.07.2021, 08:52:49

@trueblue Dzięki, ale niestety nie działa: https://drive.google.com/file/d/1kQ8tQQZOKr...iew?usp=sharing

Chyba przez CSS się tego nie da zrobić. Myślę, żeby pokombinować jakoś z metodami:
- zoom(), tzn. powiększać obrazek w zależności od tego ile brakuje do 300px
- zoomTo(), tzn. pomniejszać obrazek w zależności od procentowej różnicy pomiędzy oryginałem a obrazkiem pomniejszonym.

trueblue

9.07.2021, 08:57:22

width oraz height bym na chwilę wyłączył z CSS.

stellatus

9.07.2021, 09:53:10

@LowiczakPL Dzieki, niestety także nie działa: https://drive.google.com/file/d/1Etu-yks56U...iew?usp=sharing

Zastosuję zoomTo(). W wypadku obrazka poziomego docelowa wysokość to 300px. Te 300px dzielę przez oryginalną wysokość i otrzymuję proporcję, którą wpisuję do zoomTo. W wypadku obrazka pionowego docelowa szerokość to 300px. Te 300px dzielę przez oryginalną szerokość i otrzymuję proporcję, którą wpisuję do zoomTo.

Teraz tylko trzeba napisać odpowiednią funkcję. Ma to sens?

@trueblue

"width oraz height bym na chwilę wyłączył z CSS."

efekt jest taki:
https://drive.google.com/file/d/1BOMCyei5dY...iew?usp=sharing

Ale problem chyba udało mi się rozwiązać:

Kod

function fillCropContainer() {
      var instanceArray = [cropper1, cropper2]
      var ratio
      instanceArray.forEach((el) => {
        var imgNatHeight = el.imageData.naturalHeight
        var imgNatWidth = el.imageData.naturalWidth
        if (imgNatHeight < imgNatWidth) {
          ratio = 300 / imgNatHeight
          el.zoomTo(ratio)
        } else {
          ratio = 300 / imgNatWidth
          el.zoomTo(ratio)
        }
      })
    }

Muszę to jeszcze potestować.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.