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

Skalowanie obrazków img

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
808 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,540 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ź 802 wizyt
pytanie zadane 21 marca 2017 w HTML i CSS przez bat_kuba Użytkownik (600 p.)
0 głosów
0 odpowiedzi 138 wizyt
0 głosów
1 odpowiedź 1,034 wizyt
pytanie zadane 26 czerwca 2017 w HTML i CSS przez Mateusz Patalan Bywalec (2,140 p.)

93,187 zapytań

142,203 odpowiedzi

322,016 komentarzy

62,513 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2365p. - dia-Chann
  2. 2326p. - Łukasz Piwowar
  3. 2315p. - Łukasz Eckert
  4. 2301p. - CC PL
  5. 2269p. - Tomasz Bielak
  6. 2235p. - Łukasz Siedlecki
  7. 2232p. - rucin93
  8. 2169p. - Marcin Putra
  9. 2006p. - Michal Drewniak
  10. 1946p. - Adrian Wieprzkowicz
  11. 1901p. - Mikbac
  12. 1744p. - rafalszastok
  13. 1734p. - Anonim 3619784
  14. 1586p. - Dawid128
  15. 1480p. - ssynowiec
Szczegóły i pełne wyniki

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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...