Bootstrap-ban kép elhelyezése egy másik képen

Bootstrap-ban kép elhelyezése egy másik képen
2017-11-27T10:18:15+01:00
2017-12-07T11:01:20+01:00
2022-10-15T21:30:55+02:00
MercedesS500
Üdv!

A .play képet szeretném a másik kép közepére rakni. Az alábbi kód valamiért nem ezt csinálja, mutatom itt külön mellékletben, hogy mit csinál.

Fix méreteket nem adhatok semminek, mert bootstrap-ben van, és telefonon is jónak kell lennie.

echo '<div class="sidebar_youtube_box">'; echo '<a href="#" id="'.$vid['sidebar_video_v_id'].'" data-url="'.$vid['sidebar_video_link'].'" class="open_youtube_modal" title="'.$vid['sidebar_video_nev'].'"> <img src="'.$host.'/images/youtube/'.$vid['sidebar_video_thumb'].'" class="img-responsive"> <img src="'.$host.'/images/assets/play.png" class="img-responsive play_png"> </a>'; echo '</div>'; .sidebar_youtube_box { margin-bottom: 15px } .sidebar_youtube_box { position: relative; } .play_png { z-index: 2; position: absolute; top: 50%; left: 50%; }
Mutasd a teljes hozzászólást!
Csatolt állomány
Próbálgattam és rájöttem mi a baj. A képed (play gomb) felső sarka az középre van igazítva, ott is jelenik meg.

Módosítottam a kódod:

echo '<div class="sidebar_youtube_box">'; echo '<a href="#" id="'.$vid['sidebar_video_v_id'].'" data-url="'.$vid['sidebar_video_link'].'" class="open_youtube_modal" title="'.$vid['sidebar_video_nev'].'"> <img src="'.$host.'/images/youtube/'.$vid['sidebar_video_thumb'].'" class="img-responsive"> <img src="'.$host.'/images/assets/play.png" class="play_png" width="50%"> </a>'; echo '</div>'; .sidebar_youtube_box { margin-bottom: 15px } .sidebar_youtube_box { position: relative; } .play_png { z-index: 2; position: absolute; top: 25%; left: 25%; } Azt csináltam, hogy a <img> play gomb class-ból kivettem az img_responsive-t, mert több helyen van használva így nem akartam változtatni.


Megmaradt benne a class="play_png" . Adtam neki width="50%"-ot. A .play_png class-t bedig 25-25 %-ra állítottam. Most ez így jó lesz szerintem, de a gyakorlatban a play gombod nem tudom átméreteződik-e majd. Próbáld ki. Ha nem akkor kitaláljuk mit változtassunk
.
Mutasd a teljes hozzászólást!

  • A szülő elem nem lenne jobb position:relative; a gyermekek meg position:absolute; eltérő z-index megadással és megfelelő left-top értékekkel?
    Mutasd a teljes hozzászólást!
  • Szia! Az class=open_youtube_modal és a class=img-responsive css-t is írd meg mit tartalmaz.
    Mutasd a teljes hozzászólást!
  • Szia!

    Az elsőnek nincs semmi, csak margin-bottom 15, az img-repsponsive pedig a "gyári" bootstrap-es, azaz:

    display: block; max-width: 100%; height: auto
    Mutasd a teljes hozzászólást!
  • Szia,

    a .play_png-t egészítsd ki ezzel:

    transform: translate(-50%, -50%);
    Szerk.:
    Mivel a img-responsive css osztályodról nem sokat tudni, az még bezavarhat.
    De középre igazításhoz ennyi elég:

    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    Mutasd a teljes hozzászólást!
  • Próbálgattam és rájöttem mi a baj. A képed (play gomb) felső sarka az középre van igazítva, ott is jelenik meg.

    Módosítottam a kódod:

    echo '<div class="sidebar_youtube_box">'; echo '<a href="#" id="'.$vid['sidebar_video_v_id'].'" data-url="'.$vid['sidebar_video_link'].'" class="open_youtube_modal" title="'.$vid['sidebar_video_nev'].'"> <img src="'.$host.'/images/youtube/'.$vid['sidebar_video_thumb'].'" class="img-responsive"> <img src="'.$host.'/images/assets/play.png" class="play_png" width="50%"> </a>'; echo '</div>'; .sidebar_youtube_box { margin-bottom: 15px } .sidebar_youtube_box { position: relative; } .play_png { z-index: 2; position: absolute; top: 25%; left: 25%; } Azt csináltam, hogy a <img> play gomb class-ból kivettem az img_responsive-t, mert több helyen van használva így nem akartam változtatni.


    Megmaradt benne a class="play_png" . Adtam neki width="50%"-ot. A .play_png class-t bedig 25-25 %-ra állítottam. Most ez így jó lesz szerintem, de a gyakorlatban a play gombod nem tudom átméreteződik-e majd. Próbáld ki. Ha nem akkor kitaláljuk mit változtassunk
    .
    Mutasd a teljes hozzászólást!
  • background image?
    a -teg nek egymás után megadod a két képet, és méretezed, pozicionálod...
    utóbbikat akár automatikusan class alapján, míg a képeket style atributumba.
    Edit fiddle - JSFiddle
    Mutasd a teljes hozzászólást!
  • stego_, nem vettem észre, hogy már megoldottad neki a kérdést, bocs.

    H.Tibor.87 , Hát én is inkább egy divet tennék oda bg image-val.
    Mutasd a teljes hozzászólást!
  • Esetleg próbáld ki így:

    <div class="sidebar_youtube_box" style="position: relative;margin:20px auto;padding:0;"> <img src="eleresi_ut/th-saalbach-8-18810667.jpg" class="img-responsive"> <a href="#" id="'.$vid['sidebar_video_v_id'].'" data-url="'.$vid['sidebar_video_link'].'" class="open_youtube_modal" title="'.$vid['sidebar_video_nev'].'" style="background-image:url('eleresi_ut/youtube-512.png'); position:absolute;width:100%;height:100%; left:0;top:0;background-repeat:no-repeat; background-position: 50% 50%; background-size: 25% auto;"> </a> <span class="sidebar_youtube_title">My First Time Riding The North Shore</span> </div>
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • Vagy így, konkrétabb adatokkal (természetesen ezeket írd át sajátra: id="'" '" data-url=""
    ) =>

    <!-- Módosított CSS --> <style type="text/css"> .sidebar_youtube_box { position: relative;margin:0px auto;padding:0; } .open_youtube_modal { position:absolute;width:100%;height:100%;z-index:100;left:0;top:0; background-image:url('https://faysulipecel.hu/images/assets/youtube-512.png'); background-repeat: no-repeat;background-position: 50% 50%;background-size: 25% auto; } </style> <!-- Módosított CSS --> </head> <body> <!-- majd a módosított video-linkeknél --> <div class="sidebar_box"> <h4 class="sidebar_title"><i class="fa fa-youtube" aria-hidden="true"></i> YouTube</h4> <div class="sidebar_youtube_box"> <img src="https://faysulipecel.hu/images/youtube/th-saalbach-8-18810667.jpg" class="img-responsive"> <a href="#" id="'.$vid['sidebar_video_v_id'].'" data-url="'.$vid['sidebar_video_link'].'" class="open_youtube_modal" title="'.$vid['sidebar_video_nev'].'"> </a> </div> <span class="sidebar_youtube_title">My First Time Riding The North Shore</span> <div class="sidebar_youtube_box"> <img src="https://faysulipecel.hu/images/youtube/th-106760_879499-70279832.jpg" class="img-responsive"> <a href="#" id="'.$vid['sidebar_video_v_id'].'" data-url="'.$vid['sidebar_video_link'].'" class="open_youtube_modal" title="'.$vid['sidebar_video_nev'].'"> </a> </div> <span class="sidebar_youtube_title">30 minutes of PERFECT CONDITIONS at the Whistler Bike Park - GoPro Hero 6</span> </div>
    Mutasd a teljes hozzászólást!
  • Kiegészítő vélemény:
    Szerintem nem ártana, ha a menü fixed fent az oldal tetején lenne, hogy az oldal betöltődésekor azonnal látható, kezelhető legyen...
    Próbáld ki az oldalad eltérő eszközökön vagy minimum a linkelt tesztelő oldalon vagy hasonló linkeken!
    Megj: Vagy egy másik teszt-oldalon...
    Mutasd a teljes hozzászólást!
  • Ahogy már sokan írták, az én példám  H.Tibor.87 példájából kiindulva:

    Edit fiddle - JSFiddle

    Viszont kell fix méreteket megadnod, mert máshogy nem fogod tudni belőni, a középre igazítást.
    A bootstrap-ban is vannak fix méretek, mivel vannak töréspontok a felbontásoknál, pl: col-md-6 nem ugyan az mint a col-xs-6.
    Nem sok buktató van a méreteknél, és már nagyon sokan leírták mik az átlagos méretek amiken böngésznek az emberek manapság.


    mobilok általában 360x640-es felbontásúak vagy ilyesmi arányúak.
    notebook méret 1366x768 vagy 1920x1080
    2560x1440-es felbontást még viszonylag kevesen használnak.
    fontos lehet még az ipad méretek amik 1024x768 illetve 1366x1024
    esetleg még a hagyományos tablet méret 10"-nál 1280x600 vagy 1280x700
    extrém eset az 1600x900 felbontás, de egyre gyakoribb.
    Ezek alapján belehet lőni mik a töréspontok, hogy tuti legyen az oldal.
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd