Azonos dive-ek különböző nézet

Címkék
Azonos dive-ek különböző nézet
2021-04-22T17:00:22+02:00
2021-04-26T13:50:25+02:00
2022-10-15T21:25:25+02:00
Bokor Béla
<div style="position:absolute; top: 10>px;left:20px;">
  <img src="https://anyspeak.hu/1000/image/themes/demo\glass-ball-marble-computer-file-glass-ball-cb8ebfe22d00007c5df8f0141428ea45.png" style="position: relative; width: 50%;">
  <img src="https://anyspeak.hu/1000/image/themes/demo\b1.png" style="position: absolute; top:5px; left:80px; width: 15%;"> </div>

<div style="position:absolute; top: 10px; left:420px;">
  <img src="https://anyspeak.hu/1000/image/themes/demo\glass-ball-marble-computer-file-glass-ball-cb8ebfe22d00007c5df8f0141428ea45.png" style="position: relative;
width:50%;">
  <img src="https://anyspeak.hu/1000/image/themes/demo\b1.png" style="position: absolute;
top:5px; left:80px;width: 15%;">
</div>

2 divet szeretnék egymás mellé másolni
a második mégis jóval kisebb lesz
tudnátok segíteni miért?
Mutasd a teljes hozzászólást!
1. A fő ok az, hogy a képek méretét a tartalmazó div-ek szélessége alapján adod meg, százalékban. Mivel az első div 100% széles, a második div-ed pedig balról 420 pixelre kezdődik, de ugyanott ér véget a képernyő jobb szélén, ezért ő maga kisebb lesz, ezért a benne %-osan megadott képek mérete is változik.
2. Ha megadod a divek méretét, akkor egyenlőnek teszi ki őket és a benne található képek is ugyanakkorák lesznek benne:

<div style="position:absolute; width: 50%; top: 10px; left:20px; border: 1px solid silver;"> <img src="https://anyspeak.hu/1000/image/themes/demo/glass-ball-marble-computer-file-glass-ball-cb8ebfe22d00007c5df8f0141428ea45.png" style="position: relative; width: 50%;"> <img src="https://anyspeak.hu/1000/image/themes/demo/b1.png" style="position: absolute; top:5px; left:80px; width: 15%;"> </div> <div style="position:absolute; width: 50%; top: 10px; left:420px; border: 1px solid silver;"> <img src="https://anyspeak.hu/1000/image/themes/demo/glass-ball-marble-computer-file-glass-ball-cb8ebfe22d00007c5df8f0141428ea45.png" style="position: relative; width:50%;"> <img src="https://anyspeak.hu/1000/image/themes/demo/b1.png" style="position: absolute; top:5px; left:80px;width: 15%;"> </div>
3. De ez még mindig nem korrekt, mert ha most végiggörgeted a különböző méreteket, láthatod, hogy egymáshoz képest el fognak csúszni a képek.

4. Sokkal inkább használj valamilyen grid-et, egyszerű, egymás mellé float-olt divekkel. Ha a képek azonosak (vagy azonos arányúak), akkor a méretek miatt sem kell aggódj, mert pontosan ugyanakkorák lesznek. Ha nem azonosak, de "vághatók", akkor definiálhatsz nekik egy állandó arányt és aztán css-el szépen be tudod állítani, hogy melyik részét mutassa a képnek: CSS object-fit Property
Mutasd a teljes hozzászólást!

  • Mutasd a teljes hozzászólást!
  • pixel pontosan kell beállítanom a diveket
    Mutasd a teljes hozzászólást!
  • Pixel pontsan kellene a div beállítanom
    Mutasd a teljes hozzászólást!
  • 1. A fő ok az, hogy a képek méretét a tartalmazó div-ek szélessége alapján adod meg, százalékban. Mivel az első div 100% széles, a második div-ed pedig balról 420 pixelre kezdődik, de ugyanott ér véget a képernyő jobb szélén, ezért ő maga kisebb lesz, ezért a benne %-osan megadott képek mérete is változik.
    2. Ha megadod a divek méretét, akkor egyenlőnek teszi ki őket és a benne található képek is ugyanakkorák lesznek benne:

    <div style="position:absolute; width: 50%; top: 10px; left:20px; border: 1px solid silver;"> <img src="https://anyspeak.hu/1000/image/themes/demo/glass-ball-marble-computer-file-glass-ball-cb8ebfe22d00007c5df8f0141428ea45.png" style="position: relative; width: 50%;"> <img src="https://anyspeak.hu/1000/image/themes/demo/b1.png" style="position: absolute; top:5px; left:80px; width: 15%;"> </div> <div style="position:absolute; width: 50%; top: 10px; left:420px; border: 1px solid silver;"> <img src="https://anyspeak.hu/1000/image/themes/demo/glass-ball-marble-computer-file-glass-ball-cb8ebfe22d00007c5df8f0141428ea45.png" style="position: relative; width:50%;"> <img src="https://anyspeak.hu/1000/image/themes/demo/b1.png" style="position: absolute; top:5px; left:80px;width: 15%;"> </div>
    3. De ez még mindig nem korrekt, mert ha most végiggörgeted a különböző méreteket, láthatod, hogy egymáshoz képest el fognak csúszni a képek.

    4. Sokkal inkább használj valamilyen grid-et, egyszerű, egymás mellé float-olt divekkel. Ha a képek azonosak (vagy azonos arányúak), akkor a méretek miatt sem kell aggódj, mert pontosan ugyanakkorák lesznek. Ha nem azonosak, de "vághatók", akkor definiálhatsz nekik egy állandó arányt és aztán css-el szépen be tudod állítani, hogy melyik részét mutassa a képnek: CSS object-fit Property
    Mutasd a teljes hozzászólást!
  • Szuper

    Köszönöm!!!!!!!
    Mutasd a teljes hozzászólást!
Címkék
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd