HTML/CSS zarovnané fotky side-by-side

To pises rucne? Pouzvam amatersky Bootstrap, kde jsou takove veci relativne snadno kodovatelne.

7.9.2023 22:07 otula | skóre: 45 | blog: otakar | Adamov
Rozbalit Rozbalit vše Re: HTML/CSS zarovnané fotky side-by-side

Ehm, snažil jsem se. Nakopneš mě, jak bys to řešil v Bootstrapu?

Kdo vám tvrdí, že jste paranoidní, ten v tom spiknutí s největší pravděpodobností jede taky.

7.9.2023 22:58 X
Rozbalit Rozbalit vše Re: HTML/CSS zarovnané fotky side-by-side

Dej si na strance vyhledat "grid" a "layout" jsou tam hotove ukazky a pripadne cele kusy v prikladech. Cele chovsni se nastavuje pomoci class a responzivita je v ramci knihovny automaticky je to celkem parada.

7.9.2023 23:16 otula | skóre: 45 | blog: otakar | Adamov
Rozbalit Rozbalit vše Re: HTML/CSS zarovnané fotky side-by-side

Já už jsem to prohledával, ale vždy jsem našel pouze ukázky se stejným formátem všech fotek, což je mi úplně k ničemu. Potřebuji poskládat vedle sebe fotky různého formátu do pásu tak, aby tvořily souvislý pás stejně vysokých fotek přes celou šířku kontejneru a měly mezi sebou jednotnou několikapixelovou mezeru. To rozsypání pásu do sloupce fotek už bych nakonec i oželel, když se zoufale snažím najít způsob, jak vyřešit alespoň tohle. V LaTeXu jsem si na stejnou věc napsal makro, které si zjistí rozměry fotek, přepočítá je a perfektně vysází. Totéž by šlo asi udělat v PHP, jenže ta celková šíře není konstantní na rozdíl od dokumentu...

Kdo vám tvrdí, že jste paranoidní, ten v tom spiknutí s největší pravděpodobností jede taky.

7.9.2023 23:57 X
Rozbalit Rozbalit vše Re: HTML/CSS zarovnané fotky side-by-side

Jako co resis? Vzdyt to tam vsechno mas..

https://getbootstrap.com/docs/5.3/content/images/#responsive-images

Udelej si sloupce s pevnou sirkou a obrazek naskaluje podle jeho velikosti. Mezi sloupce dej mezeru = spacer. Sloupce nech flexibilni na malych displejich a mas to hotove.

8.9.2023 07:06 otula | skóre: 45 | blog: otakar | Adamov
Rozbalit Rozbalit vše Re: HTML/CSS zarovnané fotky side-by-side

Zřejmě myslíš tohle: https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp, ale to je mi totálně k ničemu.

Kdo vám tvrdí, že jste paranoidní, ten v tom spiknutí s největší pravděpodobností jede taky.

8.9.2023 09:08 X
Rozbalit Rozbalit vše Re: HTML/CSS zarovnané fotky side-by-side

Ne. Ted jsem to zkousel a funguje to podle tvych predstav. Kdyz to ani nezkusis tezko radit. Pouzij container, row, col a img-fluid. Bude to stejne vysoke a siroke pro uplne nahodne obrazky stazene z netu.

8.9.2023 11:28 X
Rozbalit Rozbalit vše Re: HTML/CSS zarovnané fotky side-by-side

<!doctype html>
<html lang="cs">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Test</title>
	<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<main class="container">
<div class="row align-items-center justify-content-center">
	<div class="col-2">
		<img class="img-fluid" src="test1.jpg">
	</div>
	<div class="col-2">
		<img class="img-fluid" src="test2.png">
	</div>
</main>
</body>
</html>

8.9.2023 11:51 X
Rozbalit Rozbalit vše Re: HTML/CSS zarovnané fotky side-by-side

Mensi oprava:

<!doctype html>
<html lang="cs">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Test</title>
	<link href="bootstrap.min.css" rel="stylesheet">
</head>

<body>
<main class="container">
<div class="row my-2 justify-content-center">
	<div class="col-3">
		<img class="img-fluid h-100" src="test1.jpg">
	</div>
	<div class="col-3">
		<img class="img-fluid h-100" src="test2.jpg">
	</div>
</div>
</main>
</body>
</html>

8.9.2023 11:57 X
Rozbalit Rozbalit vše Re: HTML/CSS zarovnané fotky side-by-side

Jeste ta tvoje mezera:

<!doctype html>
 <html lang="cs">
 <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Test</title>
	<link href="bootstrap.min.css" rel="stylesheet">
</head>

<body>
<main class="container">
<div class="row my-2 gx-1 justify-content-center">
	<div class="col-3">
		<img class="img-fluid h-100" src="test1.jpg">
	</div>
	<div class="col-3">
		<img class="img-fluid h-100" src="test2.jpg">
	</div>
</div>
</main>
</body>
</html>

8.9.2023 20:57 otula | skóre: 45 | blog: otakar | Adamov
Rozbalit Rozbalit vše Re: HTML/CSS zarovnané fotky side-by-side

Hm, mně ten tvůj kód naskládá ty obrázky bez jakékoliv změny rozlišení pod sebe...

Kdo vám tvrdí, že jste paranoidní, ten v tom spiknutí s největší pravděpodobností jede taky.

8.9.2023 21:03 otula | skóre: 45 | blog: otakar | Adamov
Rozbalit Rozbalit vše Re: HTML/CSS zarovnané fotky side-by-side

...a jinak už jsem si říkal, že se na to můžu vykašlat a ty náhledy jsem oříznul tak, aby měly všechny, co mají být v jednom řádku, stejné rozměry. Ale stejně by mě to zajímalo. Stránky jsem psal naposled v době, kdy nejnovějším standardem bylo xhtml 1.0 strict, takže jsem moderním html 5 zcela nepolíben...

Kdo vám tvrdí, že jste paranoidní, ten v tom spiknutí s největší pravděpodobností jede taky.

8.9.2023 21:17 X
Rozbalit Rozbalit vše Re: HTML/CSS zarovnané fotky side-by-side

Jeste jsem pridal za h-100 w-100, ale nefujguje to ;). Zaclo to vertikalne pretekat a neprisel jsem na to jak to omezit na nadrazeny provek. Kazdopadne na hrani je to porad lepsi nez psat cele CSS rucne. To uz snad dnesna nikdo nedela.

8.9.2023 21:39 otula | skóre: 45 | blog: otakar | Adamov
Rozbalit Rozbalit vše Re: HTML/CSS zarovnané fotky side-by-side

Já si totiž myslím, že ten můj požadavek je opravdu bez programování těžko realizovatelný. Přemýšlel jsem nad tím, že bez uchylování se k javascriptu by mohlo ještě jít pomocí php spočítat celkovou šířku dané sady fotek a nastavit podle toho jednotlivé výšky, a to navíc procentuálně, aby to bylo škálovatelné, ale je to moc práce kvůli něčemu, co zas tak nutně nepotřebuji.

Kdo vám tvrdí, že jste paranoidní, ten v tom spiknutí s největší pravděpodobností jede taky.

9.9.2023 19:36 tttttttttttttttttt
Rozbalit Rozbalit vše Re: HTML/CSS zarovnané fotky side-by-side

Taky mi přijde, že to možná nejde. Problém vidím v tom, že teprve podle poměru stran obrázků se rozhoduje, jestli to má být horizontální nebo vertikální. Když tam bude nízký široký obrázek, bude potřeba ho zvětšit třeba 3×, obrázky se nevejdou do řádku a je potřeba začít znovu, vertikálně.

S ořezáváním v CSS to jde takto:

<!doctype html>
<html>
  <head>
    <style>
      .row {
        display: flex;
        justify-content: space-around;
        gap: 10px;
      }
      .column:nth-child(1) {
        flex: 1;
      }
      .column:nth-child(2) {
        flex: 2;
      }
      .column:nth-child(3) {
        flex: 1;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      @media screen and (max-width: 800px) {
        .row {
          flex-direction: column;
        }
      }
    </style>
  </head>
  <body>
    <div class="row">
      <div class="column">
        <img src="https://picsum.photos/200/300" />
      </div>
      <div class="column">
        <img src="https://picsum.photos/300/100" />
      </div>
      <div class="column">
        <img src="https://picsum.photos/200" />
      </div>
    </div>
  </body>
</html>

11.9.2023 10:18 otula | skóre: 45 | blog: otakar | Adamov
Rozbalit Rozbalit vše Re: HTML/CSS zarovnané fotky side-by-side

To jsou mi teda finty... Děkuji!

Kdo vám tvrdí, že jste paranoidní, ten v tom spiknutí s největší pravděpodobností jede taky.

Dotaz: HTML/CSS zarovnané fotky side-by-side

Odpovědi