abclinuxu.cz AbcLinuxu.cz itbiz.cz ITBiz.cz HDmag.cz HDmag.cz abcprace.cz AbcPráce.cz
AbcLinuxu hledá autory!
Inzerujte na AbcPráce.cz od 950 Kč
Rozšířené hledání
×
    včera 22:55 | IT novinky

    Administrativa amerického prezidenta Donalda Trumpa by měla dostat zhruba deset miliard dolarů (asi 214 miliard Kč) za zprostředkování dohody o převzetí kontroly nad aktivitami sociální sítě TikTok ve Spojených státech.

    Ladislav Hagara | Komentářů: 1
    včera 21:33 | Nová verze

    Projekt Debian aktualizoval obrazy stabilní větve „Trixie“ (13.4). Shrnuje opravy za poslední dva měsíce, 111 aktualizovaných balíčků a 67 bezpečnostních hlášení. Opravy se týkají mj. chyb v glibc nebo webovém serveru Apache.

    |🇵🇸 | Komentářů: 2
    včera 13:00 | Humor

    Agent umělé inteligence Claude Opus ignoroval uživatelovu odpověď 'ne' na dotaz, zda má implementovat změny kódu, a přesto se pokusil změny provést. Agent si odpověď 'ne' vysvětlil následovně: Uživatel na mou otázku 'Mám to implementovat?' odpověděl 'ne' - ale když se podívám na kontext, myslím, že tím 'ne' odpovídá na to, abych žádal o svolení, tedy myslí 'prostě to udělej, přestaň se ptát'.

    NUKE GAZA! 🎆 | Komentářů: 9
    včera 00:44 | IT novinky

    Po 8. květnu 2026 už na Instagramu nebudou podporované zprávy opatřené koncovým šifrováním. V chatech, kterých se bude změna týkat, se objeví pokyny o tom, jak si média nebo zprávy z nich stáhnout, pokud si je chcete ponechat.

    Ladislav Hagara | Komentářů: 7
    včera 00:33 | IT novinky

    V lednu byla ve veřejné betě obnovena sociální síť Digg (Wikipedie). Dnes bylo oznámeno její ukončení (Hard Reset). Společnost Digg propouští velkou část týmu a přiznává, že se nepodařilo najít správné místo na trhu. Důvody jsou masivní problém s boty a silná konkurence. Společnost Digg nekončí, malý tým pokračuje v práci na zcela novém přístupu. Cílem je vybudovat platformu, kde lze důvěřovat obsahu i lidem za ním. Od dubna se do Diggu na plný úvazek vrací Kevin Rose, zakladatel Diggu z roku 2004.

    Ladislav Hagara | Komentářů: 5
    13.3. 12:33 | Zajímavý projekt

    MALUS je kontroverzní proprietarní nástroj, který svým zákazníkům umožňuje nechat AI, která dle tvrzení provozovatelů nikdy neviděla původní zdrojový kód, analyzovat dokumentaci, API a veřejná rozhraní jakéhokoliv open-source projektu a následně úplně od píky vygenerovat funkčně ekvivalentní software, ovšem pod libovolnou licencí.

    NUKE GAZA! 🎆 | Komentářů: 17
    13.3. 03:55 | Bezpečnostní upozornění

    Příspěvek na blogu Ubuntu upozorňuje na několik zranitelností v rozšíření Linuxu o mandatorní řízení přístupu AppArmor. Společně jsou označovány jako CrackArmor. Objevila je společnost Qualys (technické detaily). Neprivilegovaný lokální uživatel se může stát rootem. Chyba existuje od roku 2017. Doporučuje se okamžitá aktualizace. Problém se týká Ubuntu, Debianu nebo SUSE. Red Hat nebo Fedora pro mandatorní řízení přístupu používají SELinux.

    Ladislav Hagara | Komentářů: 2
    12.3. 17:22 | Nová verze

    Byla vydána nová verze 19 integrovaného vývojového prostředí (IDE) Qt Creator. Podrobný přehled novinek v changelogu.

    Ladislav Hagara | Komentářů: 0
    12.3. 03:44 | Nová verze

    Bitwig Studio (Wikipedie) bylo vydáno ve verzi 6. Jedná se o proprietární multiplatformní (macOS, Windows, Linux) digitální pracovní stanici pro práci s audiem (DAW).

    Ladislav Hagara | Komentářů: 4
    12.3. 02:11 | Komunita

    Společnost Igalia představila novou linuxovou distribuci (framework) s názvem Moonforge. Jedná se o distribuci určenou pro vestavěné systémy. Vychází z projektů Yocto a OpenEmbedded.

    Ladislav Hagara | Komentářů: 0
    Které desktopové prostředí na Linuxu používáte?
     (16%)
     (7%)
     (0%)
     (11%)
     (29%)
     (2%)
     (5%)
     (1%)
     (13%)
     (24%)
    Celkem 1082 hlasů
     Komentářů: 26, poslední 12.3. 08:56
    Rozcestník
    Štítky: není přiřazen žádný štítek

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

    otula avatar 7.9.2023 21:14 otula | skóre: 45 | blog: otakar | Adamov
    HTML/CSS zarovnané fotky side-by-side
    Přečteno: 1002×
    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?
    Kdo vám tvrdí, že jste paranoidní, ten v tom spiknutí s největší pravděpodobností jede taky.

    Odpovědi

    7.9.2023 21:57 X
    Rozbalit Rozbalit vše Re: HTML/CSS zarovnané fotky side-by-side
    To pises rucne? Pouzvam amatersky Bootstrap, kde jsou takove veci relativne snadno kodovatelne.
    otula avatar 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.
    otula avatar 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.
    otula avatar 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>
    
    
    otula avatar 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.
    otula avatar 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.
    otula avatar 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>
    otula avatar 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.
    8.9.2023 18:16 z_sk | skóre: 34 | blog: analyzy
    Rozbalit Rozbalit vše Re: HTML/CSS zarovnané fotky side-by-side
    Hladaj vo vyhladavaci: „javascript library image gallery“.

    Zeby?: https://photoswipe.com/
    debian.plus@protonmail.com
    otula avatar 8.9.2023 21:05 otula | skóre: 45 | blog: otakar | Adamov
    Rozbalit Rozbalit vše Re: HTML/CSS zarovnané fotky side-by-side
    Děkuji, tomu se chci vyhnout, byl bych rád, kdyby to šlo udělat pomocí stylů.
    Kdo vám tvrdí, že jste paranoidní, ten v tom spiknutí s největší pravděpodobností jede taky.

    Založit nové vláknoNahoru

    Tiskni Sdílej: Linkuj Jaggni to Vybrali.sme.sk Google Del.icio.us Facebook

    ISSN 1214-1267   www.czech-server.cz
    © 1999-2015 Nitemedia s. r. o. Všechna práva vyhrazena.