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

[otula]

Ahoj, chtěl bych po pár letech opět položit dotaz. Chtěl bych udělat přesně to, co je zde: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_images_side_by_side_resp – tedy řada fotek vedle sebe roztažená přes celou šířku daného kontejneru, všechny stejně vysoké, která se chová responzivně, takže se při úzkém zobrazení poskládá pod sebe (a všechny budou stejně široké). Na odkazované stránce to vypadá funkčně, jenže to má drobný zádrhel – všechny fotky mají stejné rozměry. Já bych tam potřeboval naskládat fotky o různých poměrech stran, což se při použití jejich CSS úplně rozsype.

Určitě to jde, protože to mnohé weby používají. Jde to ale vůbec vyřešit jen pomocí CSS, nebo je potřeba to naprogramovat?

Odpovědi

[X]

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

[otula]

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

[X]

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.

[otula]

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...

[X]

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.

[otula]

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

[X]

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.

[X]

<!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>

[X]

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>

[X]

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>

[otula]

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

[otula]

...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...

[X]

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.

[otula]

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.

[tttttttttttttttttt]

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>

[otula]

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

[z_sk]

Hladaj vo vyhladavaci: „javascript library image gallery“.

Zeby?: https://photoswipe.com/

[otula]

Děkuji, tomu se chci vyhnout, byl bych rád, kdyby to šlo udělat pomocí stylů.