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

Przesunięcie zdjęć po zmianie wysokości

VPS Starter Arubacloud
0 głosów
109 wizyt
pytanie zadane 26 sierpnia 2019 w HTML i CSS przez PiotrSobi Nowicjusz (120 p.)

Witam, Mam szablon do WordPress'a a na niego zainstalowaną wtyczkę od Wordpress'a o nazwie woocomerce, przed instalacją motywu, szablonu który kupiłem zdjęcia tj. miniatury produktów wyświetlały się prawidłowo wg. moich zamiarów na standardowym motywie ale na nowym już tego zamierzonego celu nie ma. Zdjęcia o tyle są trudne do osadzenia na stronie ponieważ każde z nich ma inną wysokość i szerokość, każde jest inne. Próbowałem już kilkanaście razy przez parę dni zmieniać wartości zdjęć, instalowania różnych wtyczek do tworzenia miniatur i bez sukcesu. Zdjęcia udało mi się pomniejszyć w pliku shop.css zminiając parametry 

.nm-shop-loop-thumbnail img {
    display: block;
    width: 50%;
    height: 50%; 
}

w taki sposób ale wywaliło mi wszystkie miniatury w lewą stronę choć ramka jest dostatecznie szeroka na to żeby zdjęcie osadziło się na środku. Nie wiem od której strony się za to zabrać, sprawdzam style osadzone na zdjęciu lecz nie ma tam pozycji... Nie miam jak również pokazać strony bo Mój operator nie zezwala na otwarcie portów od serwera wamp. Mogę pokazać przez teamwiviera jeśli ktoś zechciał by mi pomóc. Z Góry Dziękuję.

1 odpowiedź

+1 głos
odpowiedź 27 sierpnia 2019 przez pirouetti Mądrala (6,490 p.)

Czy jest to ten motyw?

http://preview.themeforest.net/item/savoy-minimalist-ajax-woocommerce-theme/full_screen_preview/12537825?_ga=2.190538349.75837032.1566875879-69324039.1566875841

Czy w oryginale było?

.nm-shop-loop-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
}

Uzywając konsoli google zmieniłem kod na taki:

    display: block;
    width: 100%;
    object-fit: contain;
    height: 5rem;

Gdzie 5rem można zamienić na jaką się chce wysokość, a img dopasowuje się bez utraty swoich proporcji, jednak zdjęcia na tym demo mają te same wielkości więc nie jestem pewien czy o to ci chodzi.

Poza tym, nie łatwiej samemu w programie graficznym dopasować wielkość zdjęć do jednego wymiaru?

Darmowy program graficzny:

https://krita.org/en/

 

 

komentarz 27 sierpnia 2019 przez PiotrSobi Nowicjusz (120 p.)
Witaj, Jako detektywowi wróżę Ci świetlaną przyszłość, Oczywiście twoja odpowiedz rozwiązała problem, zmieniłem tylko na 20rem bo 5 to troszkę mało, zmieniłem kolor tła i jest taki efekt jaki oczekiwałem. Jeszcze raz Bardzo ale to Bardzo dziękuję Ci za pomoc !

co do dopasowywania wielkości, zdjęcia są naprawdę różne a sprowadzenie ich do jednej wielkości czyli wysokości i szerokości zmieniło by ich wygląd całkowicie, pomijam fakt nawet że niektóre z nich mają (4 lata!) a to w technice cyfrowych zdjęć przepaść technologiczna! wycięcie tła i wrzucenie ich na *png trwało MIESIĄC ale to i tak nie są wszystkie zdjęcia. Bardzo dziękuję Ci że pomogłeś samoukowi ale już niebawem zabieram się za szkołę w tym kierunku (od września) i może za jakiś czas ja pomogę komuś! Dzięki!

Podpowiedz mi jeszcze jakiej przeglądarki używasz żeby robić sobie taki dev i widzieć co się dzieje? Moja Opera po zmianie pewnych wartości zlewa co wpisuje....
komentarz 7 września 2019 przez pirouetti Mądrala (6,490 p.)
Cześć.

Cieszę się, ze pomogłem.

Używam chrome oczywiście.

Pozdrawiam :)

Podobne pytania

0 głosów
1 odpowiedź 134 wizyt
0 głosów
1 odpowiedź 163 wizyt
0 głosów
1 odpowiedź 196 wizyt

92,455 zapytań

141,263 odpowiedzi

319,099 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!

...