Eredmény: 1 - 8 (8) összesen

Téma: Beillesztett képek méretének növelése 10%-kal, de maximum a szülő div szélességéig

  1. #1
    Bölcs dolcsi logója
    Csatlakozott
    09-05-15
    Hozzászólás
    1.635
    Begyűjtött 278 köszönetet
    168 hozzászólásával

    Alapbeállítás Beillesztett képek méretének növelése 10%-kal, de maximum a szülő div szélességéig

    Sziasztok!

    A címben leírtakat szeretném megvalósítani. Legjobb tudásom szerint a CSS ehhez már kevés.
    A beillesztett képek eredeti méretét, meg a szülő div aktuális méretét kellene alapul venni, hogy melyik képet hány százalékkal kell növelni, hogy még ne lógjon ki a szülő div-ből.
    Gondolom ehhez már JavaScript kell.

    Van valakinek ötlete, hogy merre keresgéljek?

    Dolcsi



  2. #2
    Szerkesztő
    Csatlakozott
    12-12-07
    Hozzászólás
    209
    Begyűjtött 87 köszönetet
    70 hozzászólásával

    Alapbeállítás re: Beillesztett képek méretének növelése 10%-kal, de maximum a szülő div szélességéi

    jQueryvel valahogy így csinálnám. Nem teszteltem a kódot.

    //megnézzük a szülő és kép szélességét
    var szulo = $('szulo-selector').width();
    var kep = $('kep-selector').width();

    //a kép szélességéhez hozzáadunk 10 százalékot
    var ujHossz = kep*1.1;

    //ha az új hossz kisebb vagy egyenlő, mint a szülő szélessége, akkor növeljük az új hosszal a kép szélességét, ha az új hossz nagyobb, mint a szülő, akkor a kép szélességét a szülő és kép különbségével növeljük.
    if (ujHossz <= szulo) {
    $('kep-selector').css("width": ujHossz + "px");
    } else {
    ujHossz = (szulo - kep) + kep;
    $('kep-selector').css("width": ujHossz + "px");
    }



  3. Az alábbi felhasználók hálásak a válaszért:

    dolcsi (2018-09-04)

  4. #3
    Bölcs dolcsi logója
    Csatlakozott
    09-05-15
    Hozzászólás
    1.635
    Begyűjtött 278 köszönetet
    168 hozzászólásával

    Alapbeállítás re: Beillesztett képek méretének növelése 10%-kal, de maximum a szülő div szélességéi

    Nagyon köszönöm!

    Elindultam ebben az irányban, és úgy tűnik, ez működne is ebben a formában:

    Kód:
    $(document).ready(function(){
    
    var szulo = $('.szulo').width();
    var kep = document.getElementById("kep").width;  
     
    var ujHossz = kep*1.1;
    
    if (ujHossz <= szulo) {
            $('#kep').css('width', ujHossz + 'px');
            $('#kep').css('height', 'auto');
    } else {
    var ujHossz = (szulo - kep) + kep;
            $('#kep').css('width', ujHossz + 'px');
            $('#kep').css('height', 'auto');
    }
    });
    csak az vele a problémám, hogy a módosítandó képek ID nélkül vannak beillesztve így:
    <img class="..." src="https://..." width="600" height="399">

    Próbáltam a getElementsByClassName-et is, de azzal nem működött.

    Mit lehet ezzel így kezdeni?


    Utoljára módosítva: dolcsi által : 2018-09-04 13:42

  5. #4
    Bölcs dolcsi logója
    Csatlakozott
    09-05-15
    Hozzászólás
    1.635
    Begyűjtött 278 köszönetet
    168 hozzászólásával

    Alapbeállítás re: Beillesztett képek méretének növelése 10%-kal, de maximum a szülő div szélességéi

    Közben eszembe jutott, hogy a hiányzó ID-t is hozzáadhatom

    Ezt beillesztve, működik is együtt minden:

    $(document).find('img.selector').attr('id', 'kep');


    Tesztelgetem még, de ha láttok benne valami hibát, megköszönném, ha szólnátok.



  6. #5
    Szerkesztő fgaber3 logója
    Csatlakozott
    10-02-07
    Hozzászólás
    205
    Begyűjtött 63 köszönetet
    46 hozzászólásával

    Alapbeállítás re: Beillesztett képek méretének növelése 10%-kal, de maximum a szülő div szélességéi

    Itt egy gyorsban összedobott megoldás:
    Kód:
    $(document).ready(function(){
    	var parentWidth = $('.szuloClassName').width();
    	var childWidth = $('.kepClassName').width()*1.1;
    	var newImgWidth = ((childWidth < parentWidth) ? childWidth : parentWidth);
            $('.kepClassName').css('width',newImgWidth +'px');
            $('.kepClassName').css('height', 'auto');
    });




  7. Az alábbi felhasználók hálásak a válaszért:

    dolcsi (2018-09-05)

  8. #6
    Bölcs dolcsi logója
    Csatlakozott
    09-05-15
    Hozzászólás
    1.635
    Begyűjtött 278 köszönetet
    168 hozzászólásával

    Alapbeállítás re: Beillesztett képek méretének növelése 10%-kal, de maximum a szülő div szélességéi

    Idézet fgaber3 eredeti hozzászólása Hozzászólás megtekintése
    Itt egy gyorsban összedobott megoldás:
    Kód:
    $(document).ready(function(){
    	var parentWidth = $('.szuloClassName').width();
    	var childWidth = $('.kepClassName').width()*1.1;
    	var newImgWidth = ((childWidth < parentWidth) ? childWidth : parentWidth);
            $('.kepClassName').css('width',newImgWidth +'px');
            $('.kepClassName').css('height', 'auto');
    });
    Tök jó, csak ebből akár a szülő div szélességénél nagyobb érték is kijöhet, nem?

    Amúgy nekem ez: $('.kepClassName').width() nem a kép natural szélességét adta vissza, de még csak nem is az <img width="..."-ben megadott értéket, hanem a szülő div szélességét. Ezért cseréltem ki erre: document.getElementById("kep").width;



  9. #7
    Szerkesztő fgaber3 logója
    Csatlakozott
    10-02-07
    Hozzászólás
    205
    Begyűjtött 63 köszönetet
    46 hozzászólásával

    Alapbeállítás re: Beillesztett képek méretének növelése 10%-kal, de maximum a szülő div szélességéi

    Elvileg nem jöhet ki nagyobb a szülőnél, ezért van benne a newImgWidth értékadásánál a feltétel.
    A $('.kepClassName').width() csak abban az esetben működik, ha csak egy elemre húzod rá az adott class-t, egyébként nem.
    Átírtam úgy, hogy az oldal minden elemére lefusson és a közvetlen szülő szélességéhez viszonyítsa a sajátját.
    Kód:
    $(document).ready(function(){
       $(".kepClassName").each(function(){
      	var parentWidth = $(this).parent().width();
            var childWidth = $(this).width()*1.1;
    	var newImgWidth = ((childWidth < parentWidth) ? childWidth : parentWidth);
    	$(this).css('width',newImgWidth +'px');
      	$(this).css('height', 'auto');
       });
    });
    Példa:
    ITT


    Utoljára módosítva: fgaber3 által : 2018-09-05 18:05

  10. Az alábbi felhasználók hálásak a válaszért:

    dolcsi (2018-09-05)

  11. #8
    Bölcs dolcsi logója
    Csatlakozott
    09-05-15
    Hozzászólás
    1.635
    Begyűjtött 278 köszönetet
    168 hozzászólásával

    Alapbeállítás re: Beillesztett képek méretének növelése 10%-kal, de maximum a szülő div szélességéi

    Jaj, tényleg! Elnéztem...

    Ez így frankón működik is, és bár az én okosságom is teszi, amit várok tőle, azért én mégis lecseréltem erre, mert erre a kódra még ránézni is jobb.

    Nagyon köszönöm mindkettőtöknek a segítséget!



Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •