size van image aanpassen aan de division

[gast0140]

Ik wil de img de hoogte en breedte geven die de class ook heeft.
Ik dacht dat het zo zou moeten lukken:
, maar dit werkt helaas niet.

<div id="containsImg">
    <img src="Afbeeldingen/myImg.png" id="myImg" ">
  </div>

document.getElementById("myImg").style.width = document.getElementById("containsImg").offsetWidth; 
document.getElementById("myImg").style.heigth = document.getElementById("containsImg").offsetHeight;

Heeft/weet iemand de oplossing?
MvG, gast0140

 

[csshunter]

Hoi gast0140,
Er staat een typo in:

document.getElementById("myImg").style.heig[COLOR="#B22222"][B]th[/B][/COLOR]
[I][COLOR="#006400"]moet zijn:[/COLOR][/I]
document.getElementById("myImg").style.heig[COLOR="#B22222"][B]ht[/B][/COLOR]

=======
Verder zou het denkelijk ook zonder javascript kunnen, met:

<div class="containsImg">
    <img src="Afbeeldingen/myImg.png" alt="">
</div>

en:

.containsImg {
    position: relative;
    }
.containsImg img {
    position: absolute;
    left: 0; /* voor IE */
    width: 100%;
    height: 100%;
    }

Het img zou dan mee moeten schalen met de container.

• Voorbeeld van zoiets: methode / testen.

=======
Als geen van deze twee soelaas biedt, heb je dan een link naar een testpagina waarop de hele html, de css en het complete javascript te zien is?
En het img uiteraard.

Met vriendelijke groet,
CSShunter

 

[gast0140]

Het is me gelukt door de css aan te passen, ik wist niet dat je met de css ook alle afbeeldingen in een bapaalde class een style kon geven.

Dankjewel, CSShunter.

Ik heb nog een snel vraagje:
Kan ik een element ook aanroepen op zijn classname? bijvoorbeeld:

document.getElementByClassName("containsImage").style.height

 

[csshunter]

Nop!
Dat zou wel handig zijn, maar document.getElementsByClassName('...') werkt niet in Internet Explorer 8.

• Zie hier in de compatibility-tables van quirksmode.org.

Er is wel een workaround: alle elementen aflopen met een loop, en dan de elementen er uit vissen die een bepaalde class="..." hebben.
Bijvoorbeeld als het allemaal <div>'s zijn die die class hebben:
[JS]<script type="text/javascript">
//<![CDATA[
var allDiv=document.getElementsByTagName('div');
for (var i=0; i<allDiv.length; i++){
if (allDiv.className=="containsImage"){
allDiv.style.height = variabeleH+"px";
}
}
//]]>
</script>[/JS]
Maar zoiets is alleen nodig als het bepalen van de hoogte dynamisch moet zijn, afhankelijk van andere dingen die op de pagina gebeuren.
Als de hoogte van de <div class="containsImage"> altijd dezelfde is, kan het gewoon met css:

.containsImage {
    height: ..px;
    }

Maar nog iets: als de hoogte van deze <div>'s zich moet aanpassen aan de hoogte van de images er in, dan zal dat in 9 van de 10 gevallen automatisch gaan, en hoeft er helemaal geen hoogte opgegeven te worden. Dat zou ik ook eens proberen.

• NB: Als de breedte van het img zich via javascript aanpast aan de breedte van de <div>, heeft ook het img geen hoogte nodig: die past zich dan vanzelf aan in verhouding tot de breedte van het image.
• Met een beetje geluk is er zelf helemaal geen javascript nodig, en kan het allemaal met alleen css (alleen een breedte-% opgeven voor het img).
• Als je een testpagina hebt, kunnen we daar eens naar kijken.

Met vriendelijke groet,
CSShunter