Kwadratowe obrazki

[Loczuch]

Hej, od razu zapraszam tutaj:

http://azymut.maurycy.eu

Jest mały problem. Strona główna ma przeze mnie edytowane obrazki, które koszmarnie dziwnie się zachowują. Ja chce najzwyczajniej, aby były one zawsze kwadratami. (poki co sa prostokaty) Każdy kwadrat niech będzie równy 25% ekranu (tak mam zrobione). Gdy ustawiam height 25% lub co innego, to..obrazek znika Oczywiście, 25% szerokosci obrazka ma byc tylko, gdy ekran wiekszy od 885px. Gdy mniejszy - wszystko działa prawidłowo. 

Czy wie ktoś jak temu zaradzić? W zakładce galeria jest to całkiem dobrze zrobione.....

 

Proszę o pomoc

[Jakub]

Jeśli obrazek w natywnej wielkości jest kwadratowy wystarczy jak tylko ustawisz width: 25%;. Height zostanie dostosowane automatycznie (a przynajmniej powinien).

[Loczuch]

Nie działa. 

Poza tym, dlaczego tak się dzieje, że gdy zmieniam w:

.blog .site-content .hentry, .archive .site-content .hentry, .search .site-content .hentry{
height 295px;
}

na...

.blog .site-content .hentry, .archive .site-content .hentry, .search .site-content .hentry{
height 25%;
}

To obrazki znikają? Ja chce aby to były zwyczajne kwadraty takie, jak są gdy zmniejszymy szerokość przeglądarki do <885px. Wie ktoś jak to zrobić? 

[Salur]

Próbowałeś użyć:

max-height: 25%;
max-width: 25%;

[Loczuch]

 

Próbowałeś użyć:

max-height: 25%;
max-width: 25%;

Próbowałam. Efekt jest ten sam, obrazki praktycznie znikają... 

[Salur]

Zobacz, u mnie wcale nie znikają, wszystko pięknie wygląda bez różnicy czy powiększone czy zmniejszone.

 

 

 

.blog .site-content .hentry, .archive .site-content .hentry, .search .site-content .hentry {

    max-height: 25%;
    max-width: 25%;

}

PS: U góry wkleiłeś css w tej postaci:

width 25%;

Zapomniałeś o dwukropku:

max-width: 25%;

[Hans Kloss PL]

Zastanów czego 25% podajesz (podpowiedź - wysokości nadrzędnego elementu, który pewnie ma wysokość 0 ). Jak chcesz określić wysokość względem wysokości okna, to musisz wszystkim nadrzędnym elementom nadać wysokość 100% (słabe rozwiązanie), lub użyć zamiast % jednostki vh. Tylko nie rozumiem jak chcesz w ten sposób kwadraty osiągnąć.

 

Edit

Widzę, że u Salura działa, a ty zawracasz głowę błędem w składni.

Pisze w ciemno z tele - to co opisałem to najczęstszy błąd;)

[Loczuch]

Zastanów czego 25% podajesz (podpowiedź - wysokości nadrzędnego elementu, który pewnie ma wysokość 0 ). Jak chcesz określić wysokość względem wysokości okna, to musisz wszystkim nadrzędnym elementom nadać wysokość 100% (słabe rozwiązanie), lub użyć zamiast % jednostki vh. Tylko nie rozumiem jak chcesz w ten sposób kwadraty osiągnąć.

 

Edit

Widzę, że u Salura działa, a ty zawracasz głowę błędem w składni.

Pisze w ciemno z tele - to co opisałem to najczęstszy błąd;)

 

 

 

Zobacz, u mnie wcale nie znikają, wszystko pięknie wygląda bez różnicy czy powiększone czy zmniejszone.

 

 

 

.blog .site-content .hentry, .archive .site-content .hentry, .search .site-content .hentry {

    max-height: 25%;
    max-width: 25%;

}

PS: U góry wkleiłeś css w tej postaci:

width 25%;

Zapomniałeś o dwukropku:

max-width: 25%;

 

Dodałam kod do strony tak jak chciałeś:

.blog .site-content .hentry, .archive .site-content .hentry, .search .site-content .hentry {
    max-height: 25%;
    max-width: 25%;
}

...Jednak to nadal nie chce działać

 

1. Kwadraty nie są kwadratami, a prostokątami:

 

 

2. Dzieje się takie coś ....

 

 

 

W porządku, mogę dodać media dla min-width:885px, ale dodanie tych dwóch linijek niczego nie zmienia, więc nie widzę sensu, abym to robiła.

 

Przedtem nie mam dwukropka, gdyż pisałam to z palca, a nie kopiowałam. Na stronie wszystko działa poprawnie (tzn. jest dwukropek). Gdyby go nie było, obrazki nie miałyby szerokości 25%.

 

Czy wie ktoś jak temu zaradzić? Jeszcze raz wytłumaczę - zależy mi na tym, aby obrazki miały szerokość 25% oraz aby były kwadratami (a nie prostokątami). Takie coś jest w galerii, jednak galerię samemu pisałam, a stronę główną nie. (jest ona zaprojektowana przez twórcę szablonu). Ważne jest to, aby obrazki były na 100% szerokości! Nie chcę aby były marginesy po lewej i prawej stronie.

[Hans Kloss PL]

Jak zbadasz te obrazki narzędziami w chrome to zobaczysz, że są one cały czas kwadratami, tylko nakładają się na siebie - może Ci to w czymś pomoże (mi nie bardzo się chce w tym grzebać).

[Loczuch]

Jak zbadasz te obrazki narzędziami w chrome to zobaczysz, że są one cały czas kwadratami, tylko nakładają się na siebie - może Ci to w czymś pomoże (mi nie bardzo się chce w tym grzebać).

Cały czas korzystam ze zbadaj element w Chromie... Proszę o pomoc, gdyż nie wiem jak to zrobić. 

 

 

@edit1

Z początku ta strona wyglądała tak: https://pictoricodemo.wordpress.com

 

 

@Edit2

Swoją drogą, jak widać w @edit1, z początku były marginesy po prawej i lewej stronie, ale ja ich nie chciałam, więc bawiłam się w kodzie CSS i ogólnie to dodałam to do kodu:

.entry-meta {
	visibility: hidden;
	position: absolute;
}

.entry-content {
	margin-top: -210px;
}

@media screen and (max-width: 1180px) {
	.blog .site-content,
																				  .archive .site-content,
																				  .search .site-content {
		max-width: 100% !important;
	}
}

@media screen and (max-width: 885px) {
	.entry-content {
		width: 100% !important;
	}
}

.blog .site-content,
.archive .site-content,
.search .site-content {
	max-width: 100%;
}

@media screen and (min-width:886px) {
	.blog .site-content .hentry,
			  .archive .site-content .hentry,
		  .search .site-content .hentry {
	/*height: 221.25px;*/
		width: 25%;
	}
}

.blog .site-content .hentry, .archive .site-content .hentry, .search .site-content .hentry {
	max-height: 25%;
	max-width: 25%;
}

[Loczuch]

@ref

[Salur]

Po prostu klikasz zbadaj element, najeżdzasz na diva tego w kodzie html. Wymiary bedziesz widzial na stronie obok najechanego diva.

[Loczuch]

Po prostu klikasz zbadaj element, najeżdzasz na diva tego w kodzie html. Wymiary bedziesz widzial na stronie obok najechanego diva.

 

 

Ja potrafię korzystać ze zbadaj element, ale nie wiem jak poprawić kod, aby obrazki działały tak jak chcę.

[Salur]

Jeżeli nie chcesz mieć marginesu wystarczy usunąć max-width i margin stąd:

.blog .site-content, .archive .site-content, .search .site-content {
    margin: 0 auto;
    max-width: 1180px;
}

[Loczuch]

Jeżeli nie chcesz mieć marginesu wystarczy usunąć max-width i margin stąd:

.blog .site-content, .archive .site-content, .search .site-content {
    margin: 0 auto;
    max-width: 1180px;
}

 

Chyba sobie ze mnie teraz żartujesz? Albo nie rozumiesz problemu, albo chcesz nabić sobie szybko posty. Nie potrzebuję takiej pomocy, na prawdę. Jakbyś zobaczył w kod, który dodałam - zrobiłam to co napisałeś już dawno, dodając width=100% .... 

 

Swoją drogą, po dodaniu TWOJEGO kodu..:

 

 

 

 

Gdybyś chciał mi pomoc, zauważyłbyś, że rozmiar zdjęć jest wyrażany w pikselach. Dla szerokości ekranu 1440px  wymiary są: 295px x 295 px.

 

Czy ktoś potrafi rozwiązać mój problem? Wynagradzam dużą ilością lajków, bądź też - jeżeli będzie taka potrzeba - mogę zapłacić.

[Loczuch]

No nic, chyba zamykamy temat..