Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ CSS _ Stylizowanie inputa obrazka

Napisany przez: frankiejojo 24.04.2019, 07:27:46

Witam,
Usiłuję zrobić galerię, a każdy z wyświetlanych obrazków będzie jednocześnie linkiem do konkretnej podstrony.

link wygląda w sposób następujący:

Kod

$proba = "<form action='opis.php?nieruchomosc=".$id1."' target ='_blank' method='post'><input type='image' src='".$fotka1."' '></form>";

html:
W JavaScript mam napisanego rotatora, który wyświetla obrazki w sliderze. Opakowałem to wszystko w klasę galeria.

Kod

W css kombinujęróżnie. Jednak jak do tej pory nie znalazłem rozwiązania.
Chodzi mi o to by obrazek zajmował 100% szerokości przeglądarki i miał wysokość 200 px (obrazek ma zostać obcięty by nie utracił proporcji.)
CSS:

Kod

#galeria img{
    width: 100%;
    height: auto;
}
#galeria{
    width: 100%;
    max-height: 200px;
    min-height: 200px;
    overflow: hidden;
}

Jakaś podpowiedź?

Napisany przez: freemp3 24.04.2019, 09:37:07

Po pierwsze, to skąd taki dziwny pomysł, żeby do tego użyć formularzy? Prościej i według mnie poprawniej było by użycie do tego celu tagów a oraz img.
Nic dziwnego, że style obrazka nie chcą zaskoczyć ponieważ ustawiasz style na tag img, a Ty masz w kodzie input.

Napisany przez: frankiejojo 24.04.2019, 09:54:04

Stosując "form action target blank" otworzy mi stronę w osobnej zakładce. Nie osiągnę tego robiąc link z obrazka.
Przy setnym odświeżeniu strony #galeria obcięła obrazek. tzn szerokość obrazka zawsze jest 100% a div galeria zaczął działać (overflow: hidden).
Niestety obrazek został przycięty "od góry" czyli widać niebo.
Jest jakaś metoda by obrazek został przycięty równomiernie od góry i od dołu?

Napisany przez: freemp3 24.04.2019, 10:03:23

Przecież atrybut target="_blank" można dodać też do tagu a i link otworzy się w nowej karcie / oknie.
Wymuszaj odświeżanie css-ów przez przeglądarkę lub zainstaluj jakiś dodatek do czyszczenia pamięci podręcznej przeglądarki, to w tedy będziesz widział zmiany na bieżąco.
Trzeba ustawić obrazek jako tło lub na pozycjonowaniu absolutnym.

Napisany przez: trueblue 24.04.2019, 12:42:12

Cytat(frankiejojo @ 24.04.2019, 10:54:04 )

Jest jakaś metoda by obrazek został przycięty równomiernie od góry i od dołu?

https://kawalekkodu.pl/upychanie-walizki-czyli-o-wlasciwosci-object-fit-i-object-position