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

**dolcsi** · 2018-09-03, 16:35

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

**apacska** · 2018-09-03, 18:25

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");
}

**dolcsi** · 2018-09-04, 12:35

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?

**dolcsi** · 2018-09-04, 13:07

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.

**fgaber3** · 2018-09-04, 13:15

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');
});

**dolcsi** · 2018-09-05, 16:20

fgaber3 eredeti hozzászólása

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;

**fgaber3** · 2018-09-05, 17:03

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

**dolcsi** · 2018-09-05, 20:07

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!

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

Téma eszközök

Display

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

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

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

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

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

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

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

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

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

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

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

Könyvjelzők

Könyvjelzők

Hozzászólás szabályai