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

Skalowanie obrazków img

VPS Starter Arubacloud
0 głosów
653 wizyt
pytanie zadane 19 maja 2019 w HTML i CSS przez husarbilu Początkujący (370 p.)

Witam Forumowiczów!

Potrzebuję na stronce ustawić skalowanie obrazków, w taki sposób aby bez względu na to, jaką szerokość ma urządzenie, zawsze wyświetlały się symetrycznie 3 obrazki na górze i 2 pod spodem.

Wrzuciłem postęp na hosting aby można było spojrzeć o co chodzi: oklejka.5v.pl

Zamieszczam kod HTML:

<article class="done">

<section>Realizacje</section>
<div id="delay"></div>

<ol>
	
			<li id="op1"><a href="img/Realizacje/Jeep Wrangler/index.html"><h6>WRANGLER</h6><img src="img341.jpeg"></a></li>
			<li id="op2"><a href="m2/index.html"><h6>BMW M2</h6><img src="img341.jpeg"></a></li>
			<li id="op3"><a href="img/Realizacje/Volkswagen Golf/index.html"><h6>GOLF</h6><img src="img341.jpeg"></a></li>
			<li id="op4"><a href="boxster1/index.html"><h6>BOXSTER</h6><img src="img341.jpeg"></a></li>
			<li id="op5"><a href="boxster2/index.html"><h6>BOXSTER</h6><img src="img341.jpeg"></a></li>
	
<div style="padding: 0; margin: 0;clear:both;"></div>
	</ol>

</article>

CSS:

.done{
	margin-top: 10px;
	width: 100%;
}
.done > ol{

	width: 100%;
		padding: 0;
	list-style-type: none;
}
.done > ol > li > a > img{
	position: relative;
	z-index: -1;
	width: 560px;
height: 380px;

}
.done > ol > li{
	padding: 0;
	margin-top: 15px;
	float: left;
}
.done > ol >#op2{
margin-right: 4%;
margin-left: 4%;
}
.done > ol >#op1{
margin-left: 30px;
}
.done > ol >#op3{
margin-right: 30px;
}
.done > ol >#op4{
margin-left: 340px;
margin-right: 80px;
}

 

1 odpowiedź

0 głosów
odpowiedź 20 maja 2019 przez pablop76 VIP (123,060 p.)
wybrane 21 maja 2019 przez husarbilu
 
Najlepsza

Stwórz kontener dla obrazków a w nim pojemniki o szerokości 1/3 kontenera ułożone obok siebie. Używaj wartości procentowych. Skalowalne obrazki tworzy się za pomocą 

img{
width:100%;
height: auto;
}

Czyszczenie float zrobiłeś źle. Nie można wstawiać do listy (między ol lub ul) innych znaczników niż li.

Użyj inline-block zamiast float, a najlepiej zrobić to za pomocą flexboxa

komentarz 21 maja 2019 przez husarbilu Początkujący (370 p.)
Zrobiłem w ten sposób, jednak obrazki przy zmianie rozmiaru okna nachodzą na siebie
komentarz 21 maja 2019 przez husarbilu Początkujący (370 p.)
Poprawiłem, jest okej.

Problem tkwił w ścieżce wskazującym znacznik img.

Dzięki wielkie!

Podobne pytania

0 głosów
1 odpowiedź 669 wizyt
pytanie zadane 21 marca 2017 w HTML i CSS przez bat_kuba Użytkownik (600 p.)
0 głosów
0 odpowiedzi 118 wizyt
0 głosów
1 odpowiedź 977 wizyt
pytanie zadane 26 czerwca 2017 w HTML i CSS przez Mateusz Patalan Bywalec (2,140 p.)

92,454 zapytań

141,262 odpowiedzi

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

...